elementUI 上传组件 http-request (覆盖默认的上传行为,可以自定义上传的实现)使用

elementUI 上传组件很方便我们上传个种类型的文件,但是一般我们的请求都是自己配置的,通过 action="url"传入上传地址就感觉不太喜欢

这时候我们就可以使用 http-request 属性来覆盖默认的上传行为(即action="url"),自定义上传的实现

html代码

    <el-dialog title="批量导入" :visible.sync="importDialog" width="30%">
      <div class="importDialog-content">
        <el-upload ref="upload" 
                   :limit="1"  <!-- 最大允许上传个数 -->
                   :auto-upload="false"  <!-- 是否在选取文件后立即进行上传 -->
                   drag 
                   :http-request="uploadFile"  <!-- 覆盖默认的上传行为,可以自定义上传的实现 -->
                   accept='.xls,.xlsx' <!-- 接受上传的文件类型 -->
                   action="customize">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处,或
            <em>点击上传</em>
          </div>
          <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div> -->
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <span class="template-download">
          <i class="el-icon-download"></i>格式模板下载:data.xlsx
        </span>
        <el-button @click="importDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确定上传</el-button>
      </span>
    </el-dialog>

js部分

     // 确认上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 文件上传
    uploadFile(params) {
      console.log("uploadFile", params);

      const _file = params.file;
      const isLt2M = _file.size / 1024 / 1024 < 2;

      // 通过 FormData 对象上传文件
      var formData = new FormData();
      formData.append("file", _file);

      if (!isLt2M) {
        this.$message.error("请上传2M以下的.xlsx文件");
        return false;
      }

      // 发起请求
      RequestUploads(formData).then(res => {
        console.log("_RequestUploads_", res);
        if (code === 2000) {
          this.$message({
            type: "success",
            message: res.msg
          });

          // 隐藏弹出框
          this.importDialog = false;
        } else {
          this.$message({
            type: "warning",
            message: res.msg
          });
        }
    }
 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
首先,你需要在 vue-quill-editor 组件的配置项中添加一个自定义的图片上传方法。你可以使用 element-ui 的上传组件实现上传操作。 在 vue-quill-editor 组件中添加如下配置项: ```javascript <template> <quill-editor ... :options="editorOption" /> </template> <script> import { Upload } from 'element-ui'; export default { data() { return { editorOption: { modules: { toolbar: { ... handlers: { image: this.customImageHandler } } } } } }, methods: { customImageHandler() { const input = document.createElement('input'); input.setAttribute('type', 'file'); input.setAttribute('accept', 'image/*'); input.onchange = () => { const file = input.files[0]; const formData = new FormData(); formData.append('file', file); Upload.request({ url: 'your-upload-api-url', method: 'post', data: formData, headers: { Authorization: 'Bearer ' + localStorage.getItem('token') // 如果需要携带认证信息 } }).then(res => { const url = res.data.url; // 根据你的上传 API 返回的数据结构获取图片 URL const quill = this.$refs.quillEditor.quill; const range = quill.getSelection(true); quill.insertEmbed(range.index, 'image', url); quill.setSelection(range.index + 1); }); }; input.click(); } } } </script> ``` 在上述代码中,我们使用 `handlers` 配置项来添加自定义的图片上传操作,即 `customImageHandler` 方法。该方法会创建一个 `input` 标签来触发文件选择框,用户选择图片后,使用 element-ui 的上传组件上传图片,并根据上传结果在编辑器中插入图片。 需要注意的是,你需要根据你的实际情况修改上传 API 的 URL,以及上传成功后返回的图片 URL 在响应数据中的字段名。另外,如果你的上传 API 需要携带认证信息,可以在请求头中添加相应的信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值