vue el-upload实现图片和文字上传-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue el-upload实现图片和文字上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、需求：

在表单中使用图片上传，每一张上传的图片都可以加上文字说明通过表单一起传到后台，最后再其他需要的地方展示出来。

el-upload v-model,js,vue,前端,vue.js,elementui,前端

二、实现：

后端表单提交时，图片需要的格式是：imageList[ { fileUrl:' ', imageExplain:' ' } ]
界面代码

v-model="form.imageUrl"
:action="fileUrl" 调用接口自定义的fileUrl上传图片到的服务路径
:on-success="handleSuccess" 成功时回调方法
:before-upload="beforeAvatarUpload" 上传时的校验回调
:before-remove="() => false" 防止按下删除键图片和文字被删除
:file-list="imageList" 图片都存到的自定义 imageList 数组
slot="file" slot-scope="{ file }" 自定义插槽，可以在里面实现输入框

<el-form-item
        label="界面："
        class="uploader-item"
      >
        <el-upload
          v-model="form.imageUrl"
          :action="fileUrl"
          accept="image/jpg,image/jpeg,image/png"
          list-type="picture-card"
          :limit="9"
          :on-success="handleSuccess"
          :before-upload="beforeAvatarUpload"
          :before-remove="() => false"
          :file-list="imageList"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.fileUrl"
              alt=""
            />
            <el-input
              v-model="file.imageExplain"
              placeholder="图片说明"
              clearable
            >
            </el-input>
            <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
                class="el-upload-list__item-delete"
                @click="handleRemove(file, imageList)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        //预览的图片弹框
        <el-dialog
          class="review-dialog"
          append-to-body
          :visible.sync="imgDialogVisible"
        >
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

3. 参数定义

 data() {
    return {
      form: {
        imageList: []
      },
      fileUrl: open_upload_path, //图片文件上传地址
      imageList: [], //上传的文件列表,
      dialogImageUrl: '', //图片预览路径
      imgDialogVisible: false, //预览是否可见
    }
  },

4.方法实现

//（文件上传成功时的钩子）
    handleSuccess(res, file, fileList) {
      if (res.code == 200 && res.result.url) {
        this.imageList.push({
          fileUrl: file.url,   //图片渲染路径
          imageUrl: res.result.url,  //要上传的路径
          imageExplain: ''  //要上传的图片说明
        })
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = ['image/jpg', 'image/jpeg', 'image/png'].includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt5M
    },
    //删除
    handleRemove(file, fileList) {
      this.imageList = fileList.filter((item) => {
        return item.uid !== file.uid
      })
    },
    //预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.fileUrl
      this.imgDialogVisible = true
    }

5. 样式设置文章来源地址https://www.toymoban.com/news/detail-693038.html

.uploader-item {
  margin: 60px 0 60px;
  :deep(.el-upload-list) {
    .is-success {
      overflow: hidden;
      height: auto;
      width: 192px;
      border: 0;
      border-radius: 0;
      margin-right: 10px;

      img,
      .el-upload-list__item-actions {
        height: 108px;
      }
      .el-input {
        .el-input__inner {
          height: 32px;
        }
      }
    }
    .is-ready,.is-uploading {
      display: none;
    }
  }
  :deep(.el-upload) {
    width: 192px;
    height: 108px;
    line-height: 108px;
    background: transparent;
    border: 1px solid #dcdfe6;
    border-radius: 0;
    margin-bottom: 20px;
    .el-icon-plus {
      color: #dcdfe6;
      font-size: 24px;
    }
  }
}

到了这里，关于vue el-upload实现图片和文字上传的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！