Element: Upload可以携带其他的post参数吗?

Created on 18 Feb 2017 · 15Comments · Source: ElemeFE/element

比如我要上传到七牛除了提供上传地址，还需要携带像key这样的参数。

Source

chaclee

Most helpful comment

@transtone
防止第一次请求带不上表单其他参数。根据我的经验，是nextTick相关。

 this.uploadData = {       
        params
 };
//防止第一次请求带不上表单其他参数
this.$nextTick(() => {
       this.$refs.upload.submit();
});

欢迎进入QQ群471838073讨论

lkdghzh on 16 Nov 2017

👍4

All 15 comments

http://element.eleme.io/#/zh-CN/component/upload#attribute

data

已找到

chaclee on 18 Feb 2017

楼主可以帮忙给个示例吗，我这里用data不起作用。

============
不是不起作用，而是不能在在 before-upload 的时候再到后台去取 uploadtoken。此时是异步的，会有问题。

transtone on 27 Feb 2017

@transtone

            <el-upload
                    action="http://up.qiniu.com/"
                    type="drag"
                    :multiple="true"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :default-file-list="fileList"
                    :data="upload_data"
                    accept="audio/*,video/*,image/*"
            >
                <i class="el-icon-upload"></i>
                <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过5Mb</div>
            </el-upload>

chaclee on 27 Feb 2017

我也是用了这个组件，是这么写的，但是每次上传都要点击两次才能上传成功，想问下，各位是否遇到过这个情况，是否有个bug呢还是我写的有问题？
:before-upload="beforeBankCardPictureUpload" class="upload-demo" :on-error="handleUploadError"
:with-credentials="true"
:show-file-list="pictures.bankCardPicture[0].show_file_list" :on-remove="handleBankCardPictureRemove"
:on-success="handleBankCardPictureSuccess" :file-list="pictures.bankCardPicture">

[email protected]

发件人： rainwsy
发送时间： 2017-02-28 01:14
收件人： ElemeFE/element
抄送： Subscribed
主题： Re: [ElemeFE/element] Upload可以携带其他的post参数吗? (#2895)
@transtone
action="http://up.qiniu.com/"
type="drag"
:multiple="true"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-error="handleError"
:default-file-list="fileList"
:data="upload_data"
accept="audio/*,video/*,image/*"
>

将文件拖到此处，或点击上传

只能上传jpg/png文件，且不超过5Mb

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

ghost on 28 Feb 2017

@transtone 场景和我类似，我是阿里云OSS，这时候需要在上传前先拿到签名串设置进去再传图片，但是呢，因为都是异步，图片就可能在还没设置的时候就上传了。我尝试过不使用自动上传，再通过submit进行上传，可惜，这个上传组件，在before-upload这一步的时候，这个组件已经对本次的图片进行配置了参数，我们在获取回来设置参数只有在下一次才有效。就坑在这里了

hasbug on 3 Mar 2017

@hasbug 可以再上传前把参数写在data里

chaclee on 3 Mar 2017

👍1

@rainwsy 也是个办法，但我的项目还有个坑，每次上传的图片都需要向后端请求个文件名进行配置（传到阿里云OSS，避免重名覆盖），这个就不知道放哪里处理了，因为这里还涉及到当前文件后缀的读取。

hasbug on 3 Mar 2017

@hasbug 可以在on-change事件里面修改data属性。

< el-upload ref="upload" class="avatar-uploader" action="http://xxxxxx" :data="formData" :multiple="false" :auto-upload="false" :name="upload" :on-success="handleAvatarSuccess" :on-change="handleChange" :before-upload="beforeAvatarUpload"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> </el-upload >
handleChange(file, fileList) {
//选择完文件后的状态
if (file.status == 'ready') {
this.formData = {
path: this.path,
name: file.name
}
}
submitUpload() {
this.$refs.upload.submit();
}

rgbangbang on 21 Sep 2017

👍2

@transtone
防止第一次请求带不上表单其他参数。根据我的经验，是nextTick相关。

 this.uploadData = {       
        params
 };
//防止第一次请求带不上表单其他参数
this.$nextTick(() => {
       this.$refs.upload.submit();
});

欢迎进入QQ群471838073讨论

lkdghzh on 16 Nov 2017

👍4

哪位大佬告诉我，为什么我的el-upload里面的action填写完后台地址，默认发送的请求是get

pro-xiaoy on 22 Nov 2017

@pro-xiaoy 有demo吗

chaclee on 22 Nov 2017

👍1

@cntaoyu

pro-xiaoy on 22 Nov 2017

@cntaoyu thanks you 我好好研究下，大佬你可以把你的源码发给我看看吗不胜感谢。之前人被别的项目借走了

pro-xiaoy on 22 Nov 2017

@transtone

在before-upload钩子中请求uploadToken，只需要返回promise就行了。

const before = this.beforeUpload(rawFile);
     // 返回promise
      if (before && before.then) {
        before.then(processedFile => {
          const fileType = Object.prototype.toString.call(processedFile);

          if (fileType === '[object File]' || fileType === '[object Blob]') {
            if (fileType === '[object Blob]') {
              processedFile = new File([processedFile], rawFile.name, {
                type: rawFile.type
              });
            }
            for (const p in rawFile) {
              if (rawFile.hasOwnProperty(p)) {
                processedFile[p] = rawFile[p];
              }
            }
            this.post(processedFile);
          } else {
            this.post(rawFile);
          }
        }, () => {
          this.onRemove(null, rawFile);
        });

不过从这里可以看出，before-upload里面应该只做文件相关处理

ployer900 on 10 Aug 2018

@transtone 场景和我类似，我是阿里云OSS，这时候需要在上传前先拿到签名串设置进去再传图片，但是呢，因为都是异步，图片就可能在还没设置的时候就上传了。我尝试过不使用自动上传，再通过submit进行上传，可惜，这个上传组件，在before-upload这一步的时候，这个组件已经对本次的图片进行配置了参数，我们在获取回来设置参数只有在下一次才有效。就坑在这里了

大佬，我是这样解决的：

beforeAvatarUpload(file) { console.log(file); let param = { name: file.name, type: 1 }; return this.$api.common.getOSSUploadPolicy(param).then(res => { console.log(res); const { policy, oss_accesskey_id, callback, signature, expire, host, filename, dir } = res.data.data; this.uploadExtraParam = { host, key: (dir ? dir + "/" : "") + filename, policy: policy, OSSAccessKeyId: oss_accesskey_id, success_action_status: "200", //让服务端返回200,不然，默认会返回204 callback: callback, signature: signature }; console.log(this.uploadExtraParam); }); }

return一个promise对象就好了