使用Vant搭建的H5页面移动端无法上传图片问题

顽强的生命力

1.     头像：
2.    
3.       
4.        <van-uploader
5.        v-model="fileList"
6.        :max-count="1"
7.        :after-read="afterRead"
8.        multiple
9.        >
10.        <van-image width="100" height="100" :src="this.path + avatarOn" />
11.       </van-uploader>
12.    
13.   

复制代码

具体的原因是因为在van-uploader组件中加了一个属性multiple所导致的，这里我们可以去看一下Vant的官网给出了答案如下图:

第一个是accept你需要去做相应的文件处理，如果你加了不去处理也会导致出现移动端上传图片失败，
第二个是multiple 官方文档上给出了详细解释，我使用安卓手机是上传失败的，苹果手机去试了试是可以的,所以大致的原因就是这两点。
还有一部分代码可以参考

1. data() {
2.     return {
3.       fileList: [], //头像上传文件数据
4.       avatarOn: "", //头像回显字段
5.     };
6.   },
7. //图片上传
8. afterRead(file) {
9.   //此时可以自行将文件上传至服务器
10.   const loading = Toast.loading({
11.   forbidClick: true,
12.   text: "上传中，请稍候...",
13.   });
14.   // 创建Canvas对象(画布)
15.   let canvas = document.createElement("canvas");
16.   // 获取对应的CanvasRenderingContext2D对象(画笔)
17.   let context = canvas.getContext("2d");
18.   // 创建新的图片对象
19.   let img = new Image();
20.   // 指定图片的DataURL(图片的base64编码数据)
21.       img.src = file.content;
22.       // 监听浏览器加载图片完成，然后进行进行绘制
23.       img.onload = () => {
24.         var newWidth = img.width * 0.7; //压缩后图片的宽度
25.         var newHeight = img.height * 0.7; //压缩后图片的高度
26.         // 指定canvas画布大小，该大小为最后生成图片的大小
27.         canvas.width = newWidth;
28.         canvas.height = newHeight;
29.         /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
30.         如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/
31.         context.drawImage(img, 0, 0, newWidth, newHeight);
32.         // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
33.         file.content = canvas.toDataURL(file.file.type, 0.7);
34.         //调用后端上传接口
35.         uploadAccountApi(file)
36.           .then((res) => {
37.             this.userForm.avatar = res.fileName;//可以把上传到服务器的图片值给了你所要保存的Form表单中的头像字段可以实现保存头像
38.           })
39.           .finally(() => {
40.             loading.close();
41.           });
42.       };
43.     },

复制代码

 

来源:https://www.cnblogs.com/zkmblog/archive/2023/08/16/17633134.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！