Element UI 图片上传

2021-04-27 18:32:37 阅读：172 来源： 互联网

标签：const border formData Element UI file images 178px 上传

<div>
  <!-- <input
    v-model="postModel.title_img"
    type="text"
    class="allInput"
  /> -->
  <el-upload
    class="images-uploader"
    action="#"
    :http-request="handelImageRequest"
    :show-file-list="false"
    :before-upload="beforeImagesUpload"
    :auto-upload="true"
  >
    <img
      v-if="postModel.title_img"
      :src="postModel.title_img"
      class="images"
    />
    <i v-else class="el-icon-plus images-uploader-icon"></i>
  </el-upload>
</div>

beforeImagesUpload(file) {
  const ext = file.type.split('/')[1];
  const isImg = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1;
  const isLt2M = file.size / 1024 / 1024 < 1;

  if (!isImg) {
    this.$message.error("请上传正确的图片文件!");
  }
  if (!isLt2M) {
    this.$message.error("图片大小不能超过1MB!");
  }
  return isImg && isLt2M;
},
handelImageRequest(param) {
  const formData = new FormData()
  formData.append('file', param.file)
  let config = {
      headers:{"Content-Type":"multipart/form-data"}
  };
  let that = this;
  this.$axios.post("/Upload/getImgUrl", formData , config ).then((p) => {
      // console.log(p); // 直接返回图片地址
      that.postModel.title_img = p;
  });      
}

<style scoped>
.images-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.images-uploader .el-upload:hover {
  border-color: #409eff;
}
.images-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border:1px dashed #8c939d;
}
.images {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

标签：const,border,formData,Element,UI,file,images,178px,上传
来源： https://www.cnblogs.com/jiqing9006/p/14710325.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Element UI 图片上传