使用Vant搭建的H5页面移动端无法上传图片问题
头像：<van-uploader
v-model="fileList"
:max-count="1"
:after-read="afterRead"
multiple
>
<van-image width="100" height="100" :src="this.path + avatarOn" />
</van-uploader>
具体的原因是因为在van-uploader组件中加了一个属性multiple所导致的，这里我们可以去看一下Vant的官网给出了答案如下图:
第一个是accept你需要去做相应的文件处理，如果你加了不去处理也会导致出现移动端上传图片失败，
第二个是multiple 官方文档上给出了详细解释，我使用安卓手机是上传失败的，苹果手机去试了试是可以的,所以大致的原因就是这两点。
还有一部分代码可以参考
data() {
return {
fileList: [], //头像上传文件数据
avatarOn: "", //头像回显字段
};
},
//图片上传
afterRead(file) {
//此时可以自行将文件上传至服务器
const loading = Toast.loading({
forbidClick: true,
text: "上传中，请稍候...",
});
// 创建Canvas对象(画布)
let canvas = document.createElement("canvas");
// 获取对应的CanvasRenderingContext2D对象(画笔)
let context = canvas.getContext("2d");
// 创建新的图片对象
let img = new Image();
// 指定图片的DataURL(图片的base64编码数据)
img.src = file.content;
// 监听浏览器加载图片完成，然后进行进行绘制
img.onload = () => {
var newWidth = img.width * 0.7; //压缩后图片的宽度
var newHeight = img.height * 0.7; //压缩后图片的高度
// 指定canvas画布大小，该大小为最后生成图片的大小
canvas.width = newWidth;
canvas.height = newHeight;
/* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/
context.drawImage(img, 0, 0, newWidth, newHeight);
// 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
file.content = canvas.toDataURL(file.file.type, 0.7);
//调用后端上传接口
uploadAccountApi(file)
.then((res) => {
this.userForm.avatar = res.fileName;//可以把上传到服务器的图片值给了你所要保存的Form表单中的头像字段可以实现保存头像
})
.finally(() => {
loading.close();
});
};
},
来源:https://www.cnblogs.com/zkmblog/archive/2023/08/16/17633134.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]