el-upload 上传 base64 图片

el-upload 上传 base64 图片

​ 🎲🎲🎲

• el-upload 上传 base64 图片

  • 🪶 使用 el-upload 组件
  • 🪶 转换 base64 方法使用 Promise
  • 🪶 异步调用转换同步调用

• 代码区域

  • 👻 页面组件

    <template>
    	      <el-upload
    						class="avatar-uploader"
    						accept="JPG, .PNG, .JPEG,.jpg, .png, .jpeg"   // 可接收的文件格式
    						list-type="picture"   // 图片显示样式
    						:headers="headers"   // 图片上传时携带的token
    						:action="url"   // 图片上传时地址
    						:multiple="false"   // 是否支持多选
    						:show-file-list="false"   // 是否展示文件列表
    						:http-request="uploadImg"   // 自定义上传，会覆盖默认上传行为
    					>
                // 如果有图片则显示图片，没图片显示加号
    						<img v-if="this.imgString" :src="this.imgString" class="avatar" />
    						<i v-else class="el-icon-plus avatar-uploader-icon" size="mini"></i>
    				</el-upload>
            // 建议分开写，否则图片数据不一定能拿到
    				<el-button type="success" size="mini" @click="submitImg()">
              	上传到服务器
    				</el-button>
    </template>
    

  • 👻 页面数据

    <script>
      export default{
        data(){
          return {
            // 图片上传参数
    				imgString: ''
            // 图片上传头部信息（如果需要token就需要携带头部信息）
    				headers: {
    					Authorization: "Bearer" + getToken(),
    				},
            // 图片上传路径
    				url: Cookies.get("configsapi") + "/upload",
          }
        },
        methods: {
        	// 转换base64方法时Promise对象，必须换成同步
          // 网上还有其它办法，但是尝试过后，这个方法出错的概率最低
    			async uploadImg(file) {
            // 这里不一定是file.file，如果使用的方法不一样，有的是file.raw
            // 这里传入的应该是组件中携带的文件信息
    				let base64Str = await this.getBase64(file.file);
            console.log(base64Str);
    				this.imgString = base64Str.split(',');
            console.log(this.imgString);
    			},
    			// 获取图片转base64，这里用的是Promise，所以调用方法时必须转换成同步（async，await）
          // 否则上传数据时好时坏，能不能上传成功全看运气 ^_^
    			getBase64(file) {
    				return new Promise(function (resolve, reject) {
    					const reader = new FileReader();
    					let imgResult = '';
    					reader.readAsDataURL(file)
    					reader.onload = function () {
    						imgResult = reader.result;
    					}
    					reader.onerror = function (error) {
    						reject(error);
    					}
    					reader.onloadend = function () {
    						resolve(imgResult);
    					}
    				})
    			},
          // 上传图片到服务器
    			submitImg() {
            // 此处调用后台上传接口
            ……
    			},
        }
      }
    </script>