vue element-ui 文件上传

发布时间：2020-12-16 23:14:47 所属栏目：百科来源：网络整理

导读：div class="cnblogs_code" 点击上传 js 接口： export const uploadFile = params => axios.post(`${easykp_config.test}/file/upload`,params,{ headers: { 'author-token-key': localStorage.getItem('token') } }).then(res => 调用： handleExceed(files


    点击上传

接口：

export const uploadFile = params => axios.post(`${easykp_config.test}/file/upload`,params,{ headers: { 'author-token-key': localStorage.getItem('token') } }).then(res =>

调用：

handleExceed(files,fileList) { .$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length +

        <span style="color: #0000ff"&gt;return</span> <span style="color: #0000ff"&gt;this</span><span style="color: #000000"&gt;.$confirm(`确定移除 ${ file.name }？`);
    },onRemove(file,fileList) { </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;删除清空</span>
        <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; console.log(file,fileList)</span>
        <span style="color: #0000ff"&gt;this</span>.filesId =<span style="color: #000000"&gt; [];
    },uploadSectionFile(param) {
        </span><span style="color: #0000ff"&gt;var</span> fileObj =<span style="color: #000000"&gt; param.file;
        </span><span style="color: #0000ff"&gt;var</span> formData = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; FormData();
        formData.append(</span>'file'<span style="color: #000000"&gt;,fileObj);
        </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; console.log('formData',fileObj.size)可做大小限制等</span>
        uploadFile(formData).then((res) => { <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;请求数据</span>
            <span style="color: #0000ff"&gt;if</span> (res.code == 200<span style="color: #000000"&gt;) {
                </span><span style="color: #0000ff"&gt;this</span><span style="color: #000000"&gt;.filesId.push(res.body.id);
                </span><span style="color: #0000ff"&gt;this</span><span style="color: #000000"&gt;.$message.success(`上传成功`);
            } </span><span style="color: #0000ff"&gt;else</span><span style="color: #000000"&gt; {
                </span><span style="color: #0000ff"&gt;this</span><span style="color: #000000"&gt;.$message({
                    message: res.message,type: </span>'error'<span style="color: #000000"&gt;
                });
            }
        });
    }</span></pre>

具体详见官方api,很详细

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!