需求：新增商品時，支援上傳多張縮圖。

效果：

實現：

  (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

無，使用的是框架封裝好的