同时上传商品信息和商品图片

效果如下

image.png

新增&更新接口如下：

/**
 * 添加商品
 * @param {object} data
 * @param {*} config
 * @returns 无
 */
export function addGoods (data, params, config) {
  var configs = {
    headers: { 'Content-Type': 'multipart/form-data' }
  }
  return postFile('/Product/add', data, params, configs)
}
/**
 * 更新商品
 * @param {*} data
 * @param {*} config
 * @returns
 */
export function updateGoods (data, params, config) {
  var configs = {
    headers: { 'Content-Type': 'multipart/form-data' }
  }
  return postFile('/Product/update', data, params, config)
}

商品信息放在params 里面，file 放到data 里面，页面使用的是element的上传组件
element 代码如下：

<el-upload
            class="upload-wrap"
            action="#"
            drag
            :show-file-list="false"
            :on-change="uploadFile"
            accept="image/gif, image/jpeg,image/png"
            :auto-upload="false">
            <div class="target-img-wrap" v-if="uploadImg">
              <div class="mark" @click.stop="markClickFun">
                <i class="el-icon-delete del-icon" @click.stop="deleteImgFun"></i>
              </div>
              <div class="upload-img-wrap">
                <img :src="uploadImg" alt="">
              </div>
            </div>
            <div slot="default" class="upload-btn">
              <i class="el-icon-upload"></i>
            </div>
          </el-upload>

样式代码如下：

/**
图片上传
*/
.target-img-wrap{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .mark{
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.5);
    color: #fff;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .del-icon{
      width: 50px;
      height: 50px;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }
  }
  .upload-img-wrap{
    width: 100%;
    height: 100%;
    img{
      width: 100%;
      height: 100%;
    }
  }
  &:hover{
    .mark{
      display: flex;
      // pointer-events: none;
    }
  }
}

element 得到file文件流代码如下：

/**
     * 图片上传到本地展示
     */
    uploadFile (file, fileList) {
      let files = file.raw
      const fileType = files.type
      const isImage = fileType.indexOf('image') !== -1
      const isLt2M = files.size / 1024 / 1024 < 2
      // 这里常规检验，看项目需求而定
      if (!isImage) {
        this.$message.error('只能上传图片格式png、jpg、gif!')
        return
      }
      if (!isLt2M) {
        this.$message.error('只能上传图片大小小于2M')
      }
      var reader = new FileReader()
      reader.onload = (evt) => {
        this.uploadImg = evt.target.result
      }
      reader.readAsDataURL(files)
      this.fileLoad = new FormData()
      this.fileLoad.append('file', files)
    },

新增上传接口调用

addGoods(this.fileLoad, this.ruleForm).then(res => { // 新增
              this.$emit('addBack', res)
            })

更新上传接口调用如下：

if (!this.fileLoad) { // 如果不更新图片，上传一个空的file,可使用blob 来建一个空的二进制流
              this.fileLoad = new FormData()
              this.fileLoad.append('file', new Blob())
            }

            updateGoods(this.fileLoad, this.ruleForm).then(res => { // 编辑
              this.$emit('addBack', res)
            })

• 注意：
  更新的时候，如果不上传图片，但是file 又是必须传的一空的file 文件流，不能直接在file 里塞入null

 this.fileLoad.append('file', null)

这种写法是错误的