+思路:
1.点击 input标签,打开文件库,点选图片后,执行uploadFile($event)函数 .注意:要是change事件

2.在uploadFile($event)函数中读取图片文件,拿到base64文件,直接给img标签的src属性,图片即可预览
3.图片上传,要将图片转成formData格式发送请求给后台

  • 代码
    HTML代码:

       <div class="alert-box-item" >
            拍照
            <input  @change="uploadFile($event)" type="file">  //用来打开手机或者电脑端的文件,然后读取文件
             <img :src=valueUrl  v-if="valueUrl"> // 预览图片用
          </div>
    

js代码:

uploadFile (el) {
      if (!el.target.files[0].size) return; // 如果文件大小为0,则返回
      if (el.target.files[0].type.indexOf('image') === -1) { //如果不是图片格式
        // this.$dialog.toast({ mes: '请选择图片文件' });
        console.log('请选择图片文件');
      } else {
        const that = this;
        const reader = new FileReader(); // 创建读取文件对象
        reader.readAsDataURL(el.target.files[0]); // 发起异步请求,读取文件
        reader.onload = function () {  // 文件读取完成后
          // 读取完成后,将结果赋值给img的src
          that.valueUrl = this.result;
          // console.log(this.result);
        };
        const uid = 'e0c9dd3de0418e698d49984ae035992a'; //后台需要的参数
        const formData = new FormData();  // 创建一个formdata对象
        formData.append('res', el.target.files[0]); 
        formData.append('uid', uid);
        postUploadFile(formData).then(res => {  // 发送请求,保存图片
          if (res.status === 0) {
            this.valueUrl = res.data;
          } else {
            console.log(res);
          }
        });
      }
    },
Logo

前往低代码交流专区

更多推荐