在使用upload中,默认是自动上传,会发现会调用两次接口,一次是Request Method: OPTIONS且不带任何参数(群里大佬说是跨域 预检测),一次是Request Method: POST请求且带上我们设定的参数
如果程序仅需上传单张图片,同时执行两次肯定是不好的,其中一次还是无效的,所以,我绑定了一个:on-change方法,手动上传图片
代码如下:
<el-upload class="inline-block" action="" :auto-upload="false" :show-file-list="false" :before-upload="beforeUpload" :on-change="uploadChange"> <el-button type="primary">上传服务费加密文件</el-button> <div slot="tip" class="el-upload__tip">只能上传excel文件,且不超过1M</div> </el-upload>
uploadChange(file, fileList) { let formData = new FormData() formData.append('file', file.raw) pub.post(this.uploadApi, formData).then((res) => { if (res === 'success') { this.$message.success('上传成功') } else { this.$message.error('上传失败') } }) },
解决了单张图片的上传问题