需求： 通过iview Upload组件手动上传图片；
遇到问题： 手动上传文件流数据，后端收到值为空；
原方案： new FileReader() 解析文件流为base64格式，封装数据传给后端；
疑问，为毛上传文件流不行 转base64弊端： 转base64体积变大很多，多图片和大图影响体验；
文件流formData格式方案： 上结论
- segmentfault.com/a/119000001… 找了n多方案都不行，终于看到大佬方案；
- axios再配置容易浑浊
- 通过XMLHttpRequest 直接配置
vue:
methods: {
upload(){
let formData = new FormData()
formData.append("file",this.file)
var xhr = new XMLHttpRequest();
//接口fd：收到提交的数据后会返回收到的数据
xhr.open('POST', process.env.NODE_ENV === 'production' ? '// 线上地址' : '// 测试接口地址： baseUrl + 接口');
xhr.responseType = 'json';
xhr.send(formData);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
}
}
xhr.onload = function () {
console.log(this.response);
// 获取到后端存好的文件地址
}
}
}
vue-upload-component 组件实现大文件、多文件上传和进度展示
-
npm install --save vue-simple-uploader
-
vue: main.js文件
import uploader from 'vue-simple-uploader'; Vue.use(uploader); -
vue: upLoad.vue
<uploader
ref="uploader"
:options="options"
:autoStart="false"
:file-status-text="fileStatusText"
:withCredentials="true"
@file-added="onFileAdded"
@file-success="onFileSuccess"
@file-error="onFileError"
@file-progress="onFileProgress"
@files-submitted="submitted"
class="uploader-ui">
<uploader-unsupport></uploader-unsupport>
<div>
<uploader-btn>
....
</uploader-btn>
</div>
<uploader-list>
....
</uploader-list>
</uploader>
dat...
methods...
