关于vue使用input file如何进行图片上传并显示上传图片

• 1.首先创建input等代码

<div style="display: flex;width: 100%;margin-top: 10px;height: 100px;padding-top: 10px">
    <label for="uploadImg">
      <img :src="uploadImgUrl" alt="未发现图片" style="height: 100px;width: 100px">
    </label>
	<input type="file" id="uploadImg" style="display: none" accept="image/jpeg,image/x-png,image/gif" v-on:change="uploadImg($event)">
</div>

我们使用了一个div标签包住了上传图片的内容，并将input变迁通过display:none进行了隐藏，使用label进行上传形式的改变，我选择了使用一个图片进行点击时触发事件

• 2.设置vue中data里面的图片数据绑定，这个图片Url就是上面的图片默认展开形式

 data () {
      return {
         /*有个默认上传图片*/
           uploadImgUrl:require('../../../assets/MyIcon/uploadImg.png'),
       }
 }

• 3.开始写js代码了

uploadImg(e){
        let that = this;
        let file = e.target.files[0];
        //KB单位,可以获取图片的大小，到时候可以根据图片大小进行选择上传
        let imgSize = file.size/1024;
        
        let reader = new FileReader();
        reader.readAsDataURL(file);
        
        reader.onloadend = function () {
          // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
          let dataURL = reader.result;
        //在这里就可以进行图片地址的获取了，到时候后台上传的图片就是根据这个来的
        //that.uploadImgUrl = dataURL;这个就是展示了上传的图片
          that.uploadImgUrl = dataURL;
          //这里就可以发送请求了，也可以选择之后发送，反正图片地址都获取了
          $.ajax({
            type:"post",
            url:"上传的地址",
            async:true,
            data:{
              imgUrl:dataURL,
              avatar_wx:1,
              token:token,
              uid:uid,
            },
            success:function(e){
              that.avatar=dataURL;
              alert('修改成功');
            }
          });
      }
 },

下面就是点击后修改的图片

• 4.最后，基本就这样完成了