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

格子衬衫身上穿

已于 2024-07-16 10:38:54 修改

阅读量22

点赞数

文章标签：前端 javascript

于 2024-07-16 10:04:54 首次发布

本文链接：https://blog.csdn.net/m0_57423952/article/details/140458156

版权

<div class="van-cell van-field">
    <div class="van-cell__title van-field__label">头像：</div>
    <div class="van-cell__value van-field__value">
       <div class="van-field__body">
       <van-uploader
       v-model="fileList"
       :max-count="1"
       :after-read="afterRead"
       multiple
       >
       <van-image width="100" height="100" :src="this.path + avatarOn" />
      </van-uploader>
    </div>
  </div>
</div>

具体的原因是因为在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();
          });
      };
    },