关于搭建vue脚手架，构建引入element-ui等都不做介绍，这里只说element-ui中的upLoad中的文件处理事项。
element-ui官方文档中对该控件的使用有很详细的描述，但是有些地方还是有些模糊的。获取上传文件以及文件交给后台处理等操作，都是封装的，看不到是怎么个回事。文档中也是只字不提，我等小白实在看得云里雾里。
uploadfile.vue
<template>
<el-upload
class="upload-demo"
ref="upload"
:multiple="true"
action="https://jsonplaceholder.typicode.com/posts/"
:before-upload="beforeUpload"
: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>
</template>
<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() {
// console.log(this.$refs.upload);
this.$refs.upload.submit();
},
handleRemove(file, fileList) {
// console.log(file, fileList);
},
handlePreview(file) {
// console.log(file);
},
beforeUpload(file)
{
console.log('上传的文件信息：')
console.log(file);
let fd = new FormData();
fd.append('firstName', file);
var _url=this.HOME+'/serviceTest.aspx';
const instance=this.$http.create({
withCredentials: true
});
instance.post(_url, fd).then( (res) => {
console.log(res);
}).catch(function (error) {
console.log("请求发生错误："+error);
});
return false;
}
}
}
</script>
代码中：action="https://jsonplaceholder.typicode.com/posts/"，这个参数就是交给后台服务处理的一个关键，但是看不懂，没有办法，只好跳过，另辟蹊径。关于这一步的处理，我们在这里整：:before-upload="beforeUpload"；对应的处理方法如下：
beforeUpload(file)
{
console.log('上传的文件信息：')
console.log(file);
let fd = new FormData();
fd.append('firstName', file);
var _url=this.HOME+'/serviceTest.aspx';
const instance=this.$http.create({
withCredentials: true // withCredentials: true 使得后台可以接收表单数据 跨域请求
});
instance.post(_url, fd).then( (res) => {
console.log(res);
}).catch(function (error) {
console.log("请求发生错误："+error);
});
return false;
}
方法中的参数"file"包含了前台选取文件的所有信息，这些信息是需要传到后台进行处理的。
下面就先看看这个file的结构信息：
20190520104257.png
其中name是文件名；size应该是文件流大小；type是文件类型；webkitrelativePath是选取文件的路径，一般都是无值的，出于安全考虑。
这个文件需要一个载体才能作为参数传到后台。这个载体就是FormData；
使用formdata，只需创建新的formdata对象，将要发送的数据添加进去，后台即可接收；数据以及文件对象皆可；
处理这个问题的时候又碰到跨域问题，搞得人很头疼，查了很多资料，大多数不管用。最后大海捞针一般，终于找到了一个解决方案。
vue中axios的使用配置：main.js中引用及设置
import axios from 'axios'
Vue.prototype.$http = axios
Vue.prototype.HOME = '/api'
这个HOME值就是后台服务地址的配置关键，完美解决跨域的老大难。
然后就是对应的config/index.js中的设置
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://XXXX:XX',
changeOrigin: true,//允许跨域
pathRewrite: {
'^/api': ''
}
}
},
参数 proxyTable:的配置，解决跨域。
target: 'http://XXXX:XX',这里填写上自己后台服务的路径域名即可。
到了这里前端的所有处理基本搞定。然后顺便说一下后台的接收处理。
后台服务关键代码：
var filePram = Request.Files["firstName"];//接收前台传值
byte[] byte1 = new byte[filePram.ContentLength];
filePram.InputStream.Read(byte1, 0, ss2.ContentLength);//读取文件数据流
filePram.InputStream.Flush();
filePram.InputStream.Close();
string filePath = "X://上传文件储存//"; //根据需要设置上传文件路径
System.IO.DirectoryInfo di = new System.IO.DirectoryInfo(filePath);
di.Create();
filePath+= filePram.FileName;
System.IO.File.WriteAllBytes(filePath, byte1);//文件储存
Response.Clear();
Response.Write("success");//返回处理结果
Response.Flush();
Response.End();
整个流程下来，能够顺利的做到文件的选取上传。
最后：代码比较粗糙，主要将大致的使用流程以及主要的个人遇到的一些问题及相应的解决方案写在这里，算是一个小总结，希望能够惠己及人吧。
网友评论