element ui 多張圖片上傳、回顯、刪除

前端文件上傳

1、展示部分

<el-form-item class="aisd" label="車輛照片" prop="saveName">
			  <el-upload
			    class="avatar-uploader"
			    action="http://localhost:2000/talentsapp/product/upload" //文件上傳請求后端的地址
				:headers="headers"  //請求頭攜帶token
			    :with-credentials="true" //支持發(fā)送 cookie 憑證信息
			    :show-file-list="true" //是否顯示已上傳文件列表
				list-type="picture-card" //文件列表的類型
				:file-list="fileList"  //上傳的文件列表
				:on-remove="handleRemove" //文件刪除時觸發(fā)的事件
			    :on-success="handleAvatarSuccess" //文件上傳成功的回調(diào)
			    :before-upload="beforeAvatarUpload"> //上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回 false 或者返回 Promise 且被 reject，則停止上傳。
			    <img style="width: 100px;height: 100px;" v-if="false" src="" class="avatar">
			    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
			  </el-upload>
			</el-form-item>

2、方法部分

data() {
		 var token = this.token=sessionStorage.getItem("token");
		  return {
			fileList:[],
			form:{
				saveName:"",
				},
			http:"http://localhost:8016/img/",
			total:0,
			pageSize:10,
			currentPage:1,
			currentPage2:5,
			dialogVisible: false,
			dialogVisible1: false,
			  //請求頭攜帶token
			  headers: {
			  	"Authorization": token
			  },
			}
		}

3.函數(shù)部分

methods:{
    //上傳圖片成功之后執(zhí)行操作
    handleAvatarSuccess(res, file, fileList) {
        file.saveName = res.target;
        this.fileList=fileList;
      },
    //上傳圖像之前進(jìn)行驗(yàn)證
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isLt2M) {
      this.$message.error('上傳頭像圖片大小不能超過 2MB!');
    }
      return isJPG && isLt2M;
    },
    //刪除圖片時的回調(diào)
    handleRemove(file, fileList) {
        this.fileList=fileList;
        console.log(file, fileList);
    }
}

表單提交時的操作

這個寫的有點(diǎn)長，大家挑選自己用的到的部分復(fù)制修改一下就行

//表單提交
			onSubmit() {
				this.$refs.form.validate((valid)=>{
				  if(valid){
					 delete this.form.ptypes;
					 var file = "";
					 for(var i=0;i<this.fileList.length;i++){
						 console.info(this.fileList[i].saveName);
						 file+=this.fileList[i].saveName+",";
					 }
					 file = file.substring(0,file.length-1);
					 this.form.saveName=file;
					 console.info(this.form.saveName);
					 //往后臺發(fā)送ajax請求 獲取商品數(shù)據(jù)
					 this.$http.post("talentsapp/product/saveOrUpdate",this.form).then(response=>{
						if(response.data.success){
							this.localData();
							this.dialogVisible=false;
							this.$message({
								  message: '操作成功',
								  type: 'success'
								});
						}else{
							this.$message.error(response.data.error);
						}
					 });
				  }else{
					  return false;
				  }
				});
			},

后端文件上傳

1.controoler部分文章來源地址http://www.zghlxwxcb.cn/news/detail-701427.html

 /**
     * 文件上傳
     * @param file
     * @return
     */
    @RequestMapping("/upload")
    public DefaultMsg upload(MultipartFile file){
        DefaultMsg defaultMsg = new DefaultMsg();
        //生成保存文件名
        String saveName = UUID.randomUUID().toString();
        //目標(biāo)文件
        File targetFile = new File("D:/upload/"+saveName);
        try {
            file.transferTo(targetFile);
            defaultMsg.setTarget(saveName);
        } catch (IOException e) {
            e.printStackTrace();
            defaultMsg.setError("上傳失敗");
            defaultMsg.setSuccess(0);
        }
        return defaultMsg;
    }

到了這里，關(guān)于element ui 多張圖片上傳、回顯、刪除的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！