vue-element-admin中的表单提交上传图片问题

Question

父组件中有个表单，表单中使用了上传组件，如何提交表单再上传图片，我post使用了qs要不然我后端接收不到数据，是不是没法设置'Content-Type': 'multipart/form-data'，上传组件应该传给父组件什么值？我直接传的file，传file的话再使用qs就有问题了，这个没弄过，不知道怎么办了

上传组件中我是这样传值的：

handleChange (file, fileList) {
  console.log('file:'+JSON.stringify(file))
  //这个输出为什么是这个{"status":"ready","name":"abc.jpg","size":1945,"percentage":0,"uid":1564044810591,"raw":{"uid":1564044810591}}这种给后端是不是不行啊？以往都是'name' => 'abc.jpg' 'type' =>'image/jpg' 'tmp_name' => 'E:\wamp\tmp\php240B.tmp' 'error' => 0 'size' => 1945
  var windowURL = window.URL || window.webkitURL;
  this.dialogImageUrl=window.URL.createObjectURL(file.raw);//上传图显示
  this.$emit('paramstxt',file);//传的file，不知道这样行不行，应该传给父组件什么？
},

父组件表单中：

<el-form ref="postForm" :model="postForm" :rules="rules" class="form-container" label-width="100px">
  <sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
    <el-button v-loading="loading" type="success" @click="submitForm">
      提交保存
    </el-button>
  </sticky>
  <div class="createPost-main-container">

    <el-form-item style="margin-bottom: 35px;"  label="标题:" prop="title">
      <el-input v-model="postForm.title" :rows="1" type="textarea" :maxlength="100" required/>
    </el-form-item>


    <el-form-item prop="image_uri" style="margin-bottom: 30px;">
      <Upload @paramstxt="listenToMyBoy"/>
    </el-form-item>

  </div>
</el-form>
js部分：
methods: {
listenToMyBoy(data){
  console.log('data:'+JSON.stringify(data))
  this.postForm.image_uri = data
},

submitForm() {
  this.$refs['postForm'].validate((valid) => {
    if (valid) {
      this.loading = true
      this.postForm.act='newadd'
      newAdd(this.postForm).then(response => {
        this.$notify({
          title: '成功',
          message: '发布文章成功',
          type: 'success',
          duration: 2000
        })
        this.loading = false
      })
    } else {
      console.log('error submit!!')
      return false
    }
  })
},

}

request.js

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // 跨域请求时发送cookie
  transformRequest: data => qs.stringify(data),
  timeout: 5000 // request timeout
})

Answer 1

transformRequest: data => qs.stringify(data)
文件在这里会丢失 需要额外判断一下

'Content-Type': 'multipart/form-data' 设不设无所谓 文件类型axios最后都会删除走浏览器默认设置

• 首先你的流程可能有问题

  正常上传文件是将文件上传以后 表单提交后台返回的已经保存在服务器上的文件地址

• 所以在你的 handleChange 方法里面 文件就可以提交了

    // 对你的方法进行改造
    handleChange (file, fileList) {
      let formData = new FormData()
      // filename 是后台接口定义的文件 
      formData.append('filename', file)
      // 现代浏览器自带  当能可以改成axios 
      window.fetch('后台文件上传地址', {
            method: 'post',
           headers: {
              'Content-Type': 'multipart/form-data',
           },
           body: formData
      }).then(res => {
          console.log(res)
          var windowURL = window.URL || window.webkitURL;
          this.dialogImageUrl=window.URL.createObjectURL(file.raw);//上传图显示
          
          this.$emit('paramstxt', 'res下后台返回的已存文件路径');/ 
      })
    },