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

后台是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;
})
阅读 8k
1 个回答

先定位问题嘛。

  1. 查看 network 看服务端返回的是否正确。
  2. 如果返回正确,再排查你的回调。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题