vue的图片上传

可恨的资本家

已于 2022-08-02 15:01:08 修改

阅读量274

点赞数

文章标签： vue.js elementui javascript

于 2022-07-26 09:08:57 首次发布

本文链接：https://blog.csdn.net/Tttrycatch/article/details/125987174

版权

本文介绍了两种在Vue.js应用中实现图片上传和管理的方法，包括限制文件类型、大小，以及上传成功后的处理。第一种方式用于个人头像上传，第二种方式支持多图上传并限制数量，同时提供了图片预览、删除功能。文章还涵盖了图片路径配置、错误处理以及前端展示的细节。

摘要由CSDN通过智能技术生成

第一种

      <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="form.customerPictureUrl" :src="form.customerPictureUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

:action后面是上传的路径

uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",

上传的方法

    handleAvatarSuccess(res, file) {
      this.form.customerPictureUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error('上传客户图片只能是 JPG 格式!');
      }

      if (!isLt2M) {
        this.$message.error('上传客户图片大小不能超过 10MB!');
      }
      return isJPG && isLt2M;
    },

第二种

           <el-upload
                :class="{hide:hideUpload}"
                name="headFile"
                :action="imgUp"
                list-type="picture-card"
                :on-remove="handleDeleteImgRemove"
                :on-change="uploadImgChange"
                :file-list="fileList"
                :multiple="true"
                :limit="limitCountImg"
                :on-success="imgCuccess"
                :headers="imgHeaders"
                :auto-upload="true">
                <i slot="default" class="el-icon-upload" v-if="fileList.length != 1"></i>
                <div slot="file" slot-scope="{file}">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                  >
                  <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDeleteImgRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="picture" z-index="99">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>

上传路径和显示路径

imgUp: process.env.VUE_APP_BASE_API + '/location/people/headPortrait',
imgUpop: process.env.VUE_APP_BASE_API,

  // 删除图片，判断数量，是否显示icon
    handleDeleteImgRemove(file, fileList) {
      this.form.headPortrait = '';
      this.fileList = [];
      this.hideUpload = false;
    },

 uploadImgChange(file, fileList) {
      this.hideUpload = fileList.length >= this.limitCountImg;
    },

设置只能上传一张

  imgCuccess(response, file, fileList) {
      this.form.headPortrait = response.imgUrl
      this.FPortrait = process.env.VUE_APP_BASE_API + this.form.headPortrait
    },

获取token 需要引入

imgHeaders: {Authorization: getToken()},
import {getToken} from "../../../utils/auth";

   handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.picture = true;
    },

弹窗


picture: false,

dialogImageUrl: '',


disabled: false,

判断当后台给的图片是空是怎么处理

 <el-table-column label="故障图片" align="center" prop="pictures">
                <template slot-scope="scope">
                  <div class="demo-image__preview">
                    <el-image
                      style="width: 100px; height: 100px"
                      v-if="scope.row.pictures"
                      :src="scope.row.pictures"
                      :preview-src-list="[scope.row.pictures]">
                    </el-image>
                  </div>
                </template>
              </el-table-column>

也可以使用οnerrοr="this.style.display = 'none'"