vue element-ui upload文件上传返回值

Question

后台是koa2+mongoose,获取图片使用的koa-body插件，现在的问题是我在后台给file问件添加url属性，在后台打印显示已经添加上，但是前端获取返回值以后file没有url这个属性，这是为什么呢？然后前端要怎么样才能获得修改后的file全部属性？

前端代码：

<el-upload class="avatar-uploader" :action="$http.defaults.baseURL+'/upload'" 
:show-file-list="false" 
:on-success="handleSuccess">
<img v-if="model.icon" :src="model.icon" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

js：

handleSuccess(res) {
//   console.log(res)
this.$set(this.model, 'icon', res)
},

后台代码部分：upload.js

router.post('/', async (ctx) => {
  // 上传单个文件
  const file = ctx.request.files.file; // 获取上传文件
  //  file.url = `http://localhost:3000/upload/${file.name}`
  // 创建可读流
  const reader = fs.createReadStream(file.path);
  let filePath = path.join(__dirname, '../../static/upload') + `/${file.name}`;
  // 创建可写流
  const upStream = fs.createWriteStream(filePath);
  // 可读流通过管道写入可写流
  reader.pipe(upStream);

  file.url = `http://localhost:3000/upload/${file.name}`
  // console.log(file)  可以打印出file.url,但是传给前端后得不到url属性，所以直接传了file.url
   ctx.body = file.url;
})

Answer 1

先定位问题嘛。

1. 查看 network 看服务端返回的是否正确。
2. 如果返回正确，再排查你的回调。