当前位置：首页 > news >正文

【vue2+elementui】记录el-upload文件上传时调接口传参的几种情况

news 来源：原创 2024/9/21 10:50:42

自动上传

el-upload上传文件调接口的时候默认会带有一个入参file: 原生的file对象

无额外入参

action属性指定了文件上传的接口地址
auto-upload属性：是否在选取文件后立即上传，默认值true
所以只要设置了这两属性，文件在选择后（或拖拽到上传区域后）会自动上传到 action 属性指定的地址，默认入参是file。

<div class="batch-import-contain"><el-button type="primary" size="mini">下载模板</el-button><el-uploadclass="upload-demo"dragaction="https://jsonplaceholder.typicode.com/posts/":auto-upload="true":accept="accept"><i class="el-icon-upload"></i><div class="el-upload__text"><p>点击或将文件拖拽到这里上传</p><p>支持扩展名：.xls .xlsx .csv .et .ett .xlt...</p></div></el-upload>
</div>

export default {name: 'batchImport',data() {return {accept: '.xls,.xlsx,.csv,.et,.ett,.xlt,.png',}},
}

有额外入参

但如果还有额外的入参，就要用到http-request属性：覆盖默认的上传行为，可以自定义上传的实现
action的值可以设置为#或其他占位符，因为实际请求会在http-request中处理

<div class="batch-import-contain"><el-button type="primary" size="mini">下载模板</el-button><el-uploadclass="upload-demo"dragaction="#":accept="accept":auto-upload="true":http-request="customUpload"><i class="el-icon-upload"></i><div class="el-upload__text"><p>点击或将文件拖拽到这里上传</p><p>支持扩展名：.xls .xlsx .csv .et .ett .xlt...</p></div></el-upload>
</div>

export default {name: 'batchImport',data() {return {accept: '.xls,.xlsx,.csv,.et,.ett,.xlt,.png',extraParams: {userId: 123,  token: 'your_token_here' },}},methods: {customUpload(params) {// params是一个对象，包含了file和fileList，// 但是这个params参数可能每个版本不一样值就不一样，到时候自己打印看看，// 反正file的值就是原始的File对象const formData = new FormData()formData.append('file', params.file)	// 这是file入参，文件信息// 如果extraParams是个对象，循环加入formDatafor (const key in this.extraParams) {  formData.append(key, this.extraParams[key]) } // 如果extraParams是个单独的值，直接加入formData.append('extraParams', 'someValue')	// 这是额外的入参，假设叫extraParams// 调接口接口地址(入参：formData).then(res => {// 上传成功}).catch(() => {// 上传失败})},},
}

手动上传

上面是选择文件后就自动调接口上传到服务器了，还有一种情况是：选择文件后，点击确定按钮或者其他什么操作才触发文件上传至服务器

无额外入参

auto-upload属性设置为false
action属性写明接口地址
在按钮点击事件中调用upload组件的submit方法手动触发上传

<div class="batch-import-contain"><el-button type="primary" size="mini">下载模板</el-button><el-uploadclass="upload-demo"ref="upload"dragaction="https://jsonplaceholder.typicode.com/posts/":auto-upload="false":accept="accept"><i class="el-icon-upload"></i><div class="el-upload__text"><p>点击或将文件拖拽到这里上传</p><p>支持扩展名：.xls .xlsx .csv .et .ett .xlt...</p></div></el-upload>
</div>
<span class="footer"><el-button type="primary" @click="handleSure" size="mini">确定</el-button>
</span>

export default {name: 'batchImport',data() {return {accept: '.xls,.xlsx,.csv,.et,.ett,.xlt,.png',}},methods: {handleSure() {this.$ref.upload.submit()		// 写完这个就会触发上传调接口了}	}
}

有额外入参

<div class="batch-import-contain"><el-button type="primary" size="mini">下载模板</el-button><el-uploadclass="upload-demo"ref="upload"dragaction="https://jsonplaceholder.typicode.com/posts/":auto-upload="false":accept="accept":file-list="fileList" :on-change="onchange"><i class="el-icon-upload"></i><div class="el-upload__text"><p>点击或将文件拖拽到这里上传</p><p>支持扩展名：.xls .xlsx .csv .et .ett .xlt...</p></div></el-upload>
</div>
<span class="footer"><el-button type="primary" @click="handleSure" size="mini">确定</el-button>
</span>

export default {name: 'batchImport',data() {return {accept: '.xls,.xlsx,.csv,.et,.ett,.xlt,.png',fileList: [],extraParams: {userId: 123,  token: 'your_token_here' },}},methods: {onchange(file, fileList) {this.fileList = fileList},handleSure() {if(!this.fileList.length) {// 没有文件的时候要提示下"请先上传文件"return }const formData = new FormData()// 因为按钮点击事件的参数没有file信息，所以入参file要从on-change事件得到的fileList里面取// 又因为要考虑有几个文件，万一是多选就有多个，入参写法就不一样this.fileList.forEach(item => {formData.append("file[]", file.raw)// 注意：某些版本的 Element UI 可能不直接提供 file.raw，可能需要调整  // 如果不是 file.raw，则可能需要通过其他方式获取到原始的 File 对象 })// 如果单个文件，就直接formData.append("file[]", this.fileList.raw)// 额外入参for (const key in this.extraParams) {  formData.append(key, this.extraParams[key]) } // 或者单个入参  formData.append("入参名", "入参值") // 调接口开始上传接口地址(入参: formData).then(res => {// 上传成功}).catch(() => {// 上传失败})},}
}