2019-01-28图片单个上传以及批量上传

image.png

点击途中按钮能够上传图片

 const params = new FormData()
      params.append('file', file.file)
      params.append('uploadMode', this.uploadMode)
      Work.uploadFile(params).then((res) => {
        this.fileList.push({
          id: res.items.id,
          path: res.items.filePath,
          name: res.items.fileName
        })
      }).catch(() => {
        console.log('error')
      })

携程如上这种情况，会出现图片不显示的情况

image.png

这种情况下需要在本地，dev，qa去配置地址

image.png

image.png

然后在需要上传文件的页面中引入

image.png

 const params = new FormData()
      params.append('file', file.file)
      params.append('uploadMode', this.uploadMode)
      Work.uploadFile(params).then((res) => {
        this.fileList.push({
          id: res.items.id,
          path: fileUrl + res.items.filePath, //加上fileUrl 
          name: res.items.fileName
        })
      }).catch(() => {
        console.log('error')
      })

此处flieLIst是一个对象所以利用.push进行赋值
然后就可以正常上传图片啦

批量上传图片

 file.map((item, index) => {
          params.append(`file${index}`, item.file)
        })

        Work.batchupload(params).then((res) => {
          res.items.forEach((row, index) => {
            this.fileList.push({
              id: row.id,
              path: fileUrl + row.filePath,
              name: row.fileName
            })
          })
        }).catch(() => {
          console.log('error')
        })
      }

此处上传图片时需要 params.append(file${index}, item.file)为图片设置不同的key值，否则会出现文件key重复，导致批量上传时只有一张图片上传成功。
此处上传的接口是采用的是拼接方式不单独传入key值，
直接传入整个file文件

// 多个文件上传接口
export const batchupload = (params) => Http.setPromise(`POST`, `/api/v1/businessfile/batchupload?uploadMode=APP`, params)

image.png

image.png

利用模板字符串进行设置key值的唯一