上传多张缩略图（vue+element）

2019独角兽企业重金招聘Python工程师标准>>>

需求：添加商品时，支持上传多张缩略图。

效果：

实现：

  (1)前端

 <el-form-item label="缩略图" prop="thumb">
         <span v-for="item in form.thumb">
              <el-popover placement="left" title="" trigger="hover" width="600">
                <img :src="item"width="100%"/>
                <img slot="reference" :src="item" :alt="item" style="height: 150px;width: 150px; padding: 3px">
              </el-popover>
            </span>
        <!--<el-input v-model="form.thumb" placeholder="请选择缩略图"></el-input>-->
        <el-upload
          class="upload-demo"
          action="#"
          ref="upload"
          :multiple="true"
          accept="image/jpeg,image/jpg,image/png"
          :auto-upload="false"
          :on-preview="handlePreview"
          :on-change="handleChange"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture-card">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>

//上传图片涉及到的方法
    handleRemove(file, fileList) {
      this.fileList=fileList;
      //console.log(fileList);
      this.$message({
        type: 'info',
        message: '已删除原有图片',
        duration: 1000
      });
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleChange(file,fileList){
      this.fileList=fileList;
    },
create(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          this.formData = new FormData();
          for(let x in this.form){
            this.formData.append(x,this.form[x]);
          }
         for(let i=0;i<this.fileList.length;i++){
            this.formData.append("file",this.fileList[i].raw);
          }
         //this.formData.append("isDelete","0");
          console.log(this.formData);
          addUpload(this.formData)
          //addObj(this.form)
            .then(() => {
              this.dialogFormVisible = false;
              this.fileList = [];
              this.getList();
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              });
            })
        } else {
          return false;
        }
      });
    },

（2）后端

１.controller层

@RequestMapping(value = "/addUpload" , method = RequestMethod.POST)
    @ResponseBody
    public ObjectRestResponse<Goods> addUpload(@RequestParam("file")MultipartFile[] multipartFiles,Goods goods){

        goods.setIsDelete("0");
        //调用上传文件的方法
        if (multipartFiles.length>0){
            String thumn = baseBiz.upload(multipartFiles, request);
            goods.setThumb(thumn);
        }
        //框架封装好的方法
        baseBiz.insertSelective(goods);
        return new ObjectRestResponse<Goods>();
    }

2.biz层

**
     * 图片上传
     * @param multipartFiles
     * @param request
     * @return
     */
    public String upload(MultipartFile[] multipartFiles, HttpServletRequest request){
        //以“,”分割拼接文件的地址
        String thumn = "";
        //文件的个数
        int len = multipartFiles.length;
        try {
            //获取服务器的地址
            //String path = request.getSession().getServletContext().getRealPath("/upload");
            //request.getRequestURI().toString();
            String path = "F:/imageSource/upload/goods/";
            //文件保存的路径
            File filePath = new File(path);
            System.out.println("文件保存的路径为："+filePath);
            //判断filePath是否存在
            if(!filePath.exists() && !filePath.isDirectory()){
                //filePath目录不存在，需要创建
                filePath.mkdirs();
            }
            for (int i = 0; i < len; i++) {
                //获取文件的原始名称（带格式）
                String originalFileName = multipartFiles[i].getOriginalFilename();
                //获取文件的类型
                String type = originalFileName.substring(originalFileName.lastIndexOf(".")+1);
                //获取文件名（不带格式）
                String name = originalFileName.substring(0,originalFileName.lastIndexOf("."));
                //生成新的文件名
                String date = MyTime.getNowDateTime_yyyyMMddHHmmss();
                String fileName = date + name + "." + type;
                //在指定路径下创建一个文件
                File targetFile = new File(path,fileName);
                //将文件保存到服务器
                multipartFiles[i].transferTo(targetFile);
                //拼接文件地址
                if(i<len-1){
                    thumn += "http://localhost:8766/upload/goods/" + fileName + ",";
                }else{
                    thumn += "http://localhost:8766/upload/goods/" + fileName;
                }
            }
        } catch (IOException e) {//文件上传失败
            e.printStackTrace();
        }
        return thumn;
    }

3.mapper层

无，使用的是框架封装好的方法

4.mybatis.xml

无，使用的是框架封装好的方法

转载于:https://my.oschina.net/u/3734228/blog/3046047