Go语言视频零基础入门到精通

admin

昨天做了一个上传用户头像的功能，已经附件管理功能。头像上传使用了elemenUI的上传控件el-upload，附件管理因为对样式没有要求使用了原生的附件上传。
项目背景：使用axios的post调用接口
头像上传
使用el-upload标签，设置show-file-list为false不显示文件列表，注意一定要设置action（虽然这里用不到），http-request覆盖默认的上传行为，可以自定义上传的实现uploadSectionFile，这样在点击选择file文件后就直接执行uploadSectionFile中的操作。

1. <el-upload class="avatar-uploader" :http-request="uploadSectionFile" :show-file-list="false" action="https://jsonplaceholder.typicode.com/posts/">
2. 　　<img v-if="imgUrl" :src="imgUrl" class="avatar">
3.    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
4. </el-upload>

复制代码

1. 　　　　　　function uploadSectionFile(param) {
2.                 //创建临时的路径来展示图片
3.                 var windowURL = window.URL || window.webkitURL;
4.                 this.imgUrl = windowURL.createObjectURL(param.file);
5.                 let name = param.file.name;
6.                 let data = {
7.                     file: file,
8.                     fileType: name.split(".")[name.split(".").length - 1],
9.                     fileId: this.$store.getters.uid,
10.                     fileName: name,
11.                 }
12.                 let rs = ah.fileUpLoad(this, data);//封装的axio post请求
13.                 console.log(rs);
14.             },

复制代码

最后注意axios post文件上传方法的调用，data参数需要转化为formData（）传递。

  
  
   　　　　　　　　let param = new FormData(); //创建form对象
   
  
               param.append("file", data.file);//通过append向form对象添加数据
   
  
               param.append("fileType", data.fileType);//通过append向form对象添加数据
   
  
               param.append("fileId", data.fileId);//通过append向form对象添加数据
   
  
               param.append("fileName", data.fileName);//添加form表单中其他数据
   
  
               param.append("TOKEN", store.getters.accessToken);//添加登录验证
   
   
  

1. 　　　　　　axios.post(_url, params, config) .then(res => { resolve(res.data); }) .catch(err => { reject(err); }) [/i]

复制代码

  
请求头部：

请求参数格式：

使用input标签实现多文件上传
实现点击按钮选择文件上传，实现思路：隐藏input标签（不显示文件），btn的click事件触发input标签的onchange事件，然后再change事件中获取文件信息上传。

1. <!-- 多文件上传 -->
2.         <input type="file" @change="uploads($event)" id="files" style="display: none;" multiple/>
3. <!--上传按钮,在elementUI表格中的button，scope.row为行数据-->
4. <el-button size="mini" @click="uploadFile(scope.row)">上传</el-button>

复制代码

方法：

1. //上传文件
2.             function uploadFile(row) {
3.                 this.row = row;
4.                 $("#files").val("");//触发input file的点击事件
5.                 $("#files").click();//触发input file的点击事件
6.             },
7.             function uploads(e) {
8.                 for (let file of e.target.files) {//多文件上传
9.                     let data = {
10.                         file: file,
11.                         bimId: this.finfo.bimid,
12.                         actId: this.finfo.actid,
13.                         bicpId: this.row.ITEMID,
14.                     };
15.                     let rs = ah.uploadAffix(this, data);
16.                     if (!rs) break;
17.                 }
18.             },

复制代码

axios post请求参数还是要转化为formData（）

1.             let param = new FormData();
2.             param.append("file[]", data.file); // "file[]" 代表数组 其中`file`是可变的
3.             param.append("bimId", data.bimId);
4.             param.append("actId", data.actId);
5.             param.append("bicpId", data.bicpId); param.append("TOKEN", store.getters.accessToken);//必须
7. 　　　　　　axios.post(_url, params, config)
8.                 .then(res => {
9.                     resolve(res.data);
10.                 })
11.                 .catch(err => {
12.                     reject(err);
13.                 })        

复制代码

以上代码不是全部，只是提供关键性代码，主要讲解思路实现方法。欢迎提问。。。