文件上传遇到的一些问题以及解决方法
文件上传 我这里用的是element组件 这里面已经可以满足大部分人的需求
和正常操作一样 到element里面文件上传 直接复制就好:
<el-upload
class="upload-demo"
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<script>
export default {
data() {
return {
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
methods: {
submitUpload() {
this.$refs.upload.submit();
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
}
}
}
</script>
如上面情况: 我在做这一块儿的时候 遇到了几个问题
首先我们要清楚 action 是我们要上传文件的地址 也就是后面 后台给你的一个借口路径 如下:
我在这里定义为 unloadPath 然后下面定义这个路径:
在这里 前面${} 里面的为baseUrl 后面是后台给我们的接口路径复制过去就好
然后把unloadPath 和baseUrl 给定义一下:
在这 可能你对baseUrl不是很理解是怎么回事 我们可以查找看一下:
这个是我们在其他文件里面封装好的 这样再其他页面需要文件上传的时候直接调用就可以了
效果如下:
在这里报了个400 错误 看一下错误的地方 明显我们的东西已经穿过来了 但是出现 'csvfile' is not present"
这个 csvfile是一个名字 可以和后台那里协商一下: 因为我们这里用的是组件 要改的话 会比较麻烦 可以直接和后台那里交接一下 ,让后台那里改一下就可以了
下面会更新改善过后的状态: 稍等。。。。