vue3加axios共同element-plus实现图片等文件本地上传，并获取服务器返回的 ...

小白写法嘿嘿
   开发工具和关键词
  开发工具： vscode
关键词：vue3、element-plus、axios
   后端
  后端业务逻辑处理使用的是unicloud的云函数，大家可以看我上一篇文章。
   思路
  1、克制element-plus的el-upload组件自动上传，变成手动上传，提交表单时候同一处理上传文件
2、此时el-upload组件中的file文件保存到了v-model:file-list="fileList"的fileList的变量中，数据类型类型是file对象的数组
3、提交表单，循环fileList数组，将file数据类型的文件转化成base64编码
4、将子元素为base64编码数据的图片数组依次上传到服务器，并依次获取一个真实的服务器图片地址，并将这些真实地址保存到pictureslist数组
4、后面可以根据自己的代码逻辑处理真实地址的图片数组pictureslist，如：商品多张图片可以将数组转为json格式，保存到数据表中的某一个pictures字段中，后续展示商品直接读取即可
留意：这里不思量文件上传中断和大文件的情况。
   完备代码
   addproduct.vue

1. <template>
2.     <div style="width: 80%;">
3.         <el-form :model="form" label-width="auto" style="max-width: 600px">
4.             <el-form-item label="标题">
5.                 <el-input v-model="form.bt" />
6.             </el-form-item>
7.             <el-upload v-model:file-list="fileList" action="ok" :auto-upload="false" list-type="picture-card"
8.                 :on-preview="handlePictureCardPreview" :on-remove="handleRemove" multiple>
9.                 <el-icon>
10.                     添加
11.                     <Plus />
12.                 </el-icon>
13.             </el-upload>
15.             <el-dialog v-model="dialogVisible">
16.                 <img w-full :src="dialogImageUrl" alt="Preview Image" />
17.             </el-dialog>
18.             <el-form-item>
19.                 <el-button type="primary" @click="onSubmit">新增</el-button>
20.             </el-form-item>
21.         </el-form>
22.     </div>
23. </template>
25. <script>
26. import { ref, reactive } from 'vue'
27. import axios from 'axios'
30. const dialogImageUrl = ref('')
31. const dialogVisible = ref(false)
33. //这里用了响应式数据
34. var form = reactive({
35.     bt: '',
36. //tp是保存了真实图片地址后的json数组
37.     tp: '',
38. })
40. export default {
41.     name: 'HomeView',
42.     data() {
43.         return {
44.             form,
45.             dialogImageUrl,
46.             dialogVisible,
47.             fileList: [],
48.             zh: sessionStorage.getItem('zh')
49.         }
50.     },
51.     methods: {
52.         async onSubmit() {
53.             var that = this
55.             console.log('submit!')
56.             console.log(this.form);
57.             if (this.fileList.length == 0) {
58.                 return ElMessage({
59.                     message: '请先上传图片！',
60.                     grouping: true,
61.                     type: 'warning',
62.                 });
63.             }
64.             await this.upaction(); // 等待上传图片完成
65.             console.log("我的上传图片的真实路径", this.fileList);
66.             var pictureslist = []
69.             for (let i = 0; i < this.fileList.length; i++) {
70.                 pictureslist.push(this.fileList[i].url)
71.             
72.             }
74.             // 将合并后的数组转换为 JSON 字符串
75.             var jsonString = JSON.stringify(pictureslist);
77.             console.log("转换后的 JSON 字符串", jsonString);
79.             // 将转换后的 JSON 字符串赋值给 this.form.tp
80.             this.form.tp = jsonString;
81.             console.log("待上传表单数据", form);
82.             this.form.zh = this.zh
84.             // 将表单数据上传服务器
85.             const res = await axios.post(
86.                 "/api/addproduct", // 请求后端的 URL
87.                 that.form,
88.                 {
89.                     headers: {
90.                         "Content-Type": "application/json;charset=utf-8",
91.                         "Access-Control-Allow-Origin": "*", // 允许所有域名访问，或者设置为特定的域名
92.                         "Access-Control-Allow-Methods": "GET, POST, OPTIONS", // 允许的请求方法
93.                         "Access-Control-Allow-Headers": "Content-Type", // 允许的请求头
94.                     },
95.                 }
96.             );
97.             console.log("请求后", res);
98.             loadingInstance.close()
99.             ElMessage({
100.                 message: '上传成功！',
101.                 grouping: true,
102.                 type: 'success',
103.             })
105.         },
106.         handlePictureCardPreview(uploadFile) {
107.             console.log(uploadFile);
108.             this.dialogImageUrl = uploadFile.url
109.             this.dialogVisible = true
110.         },
112.         handleRemove(file, fileList) {
113.             console.log(file)
114.             console.log(fileList)
115.         },
117.         // 依次上传图片
118.         async upaction() {
119.             var that = this
120.             for (let i = 0; i < this.fileList.length; i++) {
121.                 var src = await this.uploadFile(this.fileList[i]);
122.                 this.fileList[i].url = src
123.             }
124.         },
126. //保存至服务器后返回真实图片路径地址
127.         async uploadFile(file) {
128.             console.log("uploadFile中，未编码url为", file.url);
129.             const newbasesrc = await this.getdata(file);
130.             console.log("编码url后", newbasesrc);
131.             const res = await axios.post(
132.                 "/api/upload", // 请求后端的 URL
133.                 { file: newbasesrc },
134.                 {
135.                     headers: {
136.                         "Content-Type": "multipart/form-data;charset=utf-8",
137.                         "Access-Control-Allow-Origin": "*", // 允许所有域名访问，或者设置为特定的域名
138.                         "Access-Control-Allow-Methods": "GET, POST, OPTIONS", // 允许的请求方法
139.                         "Access-Control-Allow-Headers": "Content-Type", // 允许的请求头
140.                     },
141.                 }
142.             );
143.             console.log(res);
144.             return res.data.fileUrl;
145.         },
147. //以下两个自定义函数是为了将input直接获取的file对象转成base64编码格式
149.         async getdata(file) {
150.             // 使用 FileReader 将文件转换为 base64 编码字符串
151.             console.log("getdata函数中，准备转化", file);
152.             const base64String = await this.readFileAsBase64(file);
153.             console.log("获得编码", base64String);
154.             return base64String;
155.         },
157.         readFileAsBase64(file) {
158.             return new Promise((resolve, reject) => {
159.                 const reader = new FileReader();
160.                 reader.onload = (event) => {
161.                     // 将文件转换为 base64 编码
162.                     const base64String = event.target.result;
163.                     resolve(base64String);
164.                 };
165.                 reader.onerror = reject;
166.                 // 读取文件内容并转换为 base64 编码字符串
167.                 reader.readAsDataURL(file.raw);
168.             });
169.         },
170.     }
171. }
172. </script>

复制代码

 假如对您有所资助，给个小赞赞吧！