前端vue项目中上传文件时无法上传与上一次相同的文件,使用el-upload解决方法
需求是:上传文件前提是:上传文件的接口IP是不固定的。因此不能写死。第一次解决方法:使用h5自带的input type=file时,使用change触发上传事件<input class="exportss" type="file" id="fileExport" @change="handleFileChange" ref="inputer">const inputDOM = this
·
需求是:上传文件
前提是:上传文件的接口IP是不固定的。因此不能写死。
第一次解决方法:
使用h5自带的input type=file时,使用change触发上传事件
<input class="exportss" type="file" id="fileExport" @change="handleFileChange" ref="inputer">
const inputDOM = this.$refs.inputer
this.file = inputDOM.files[0] // 通过DOM取文件数据
let size = Math.floor(this.file.size / 1024)
this.formData = new FormData() // new一个formData事件
this.formData.append('file',data.file)
this.formData.append('xxx', xxx)
this.formData.append('yyy', yyy)
inputDatas(this.formData).then(response => {})
一开始可以正常上传文件,后来发现,上传一次后,再次上传相同文件就无法触发上传事件了。
推测是因为使用的是change方法。
于是决定使用vue + element自带的el-uploader
代码如下:
<el-upload
ref="upload"
:data="inputdata"
class="upload-demo"
:action="uploadUrl"
:show-file-list="false"
:on-preview="onpreview"
:before-upload="beforeAvatarUpload"
:on-error="handleError"
:on-success="handleSuccess"
:file-list="fileList">
<el-button :loading="loadings.isInport" class="btn-special blue-btn" icon="el-icon-upload" size="mini" type="primary">导入</el-button>
</el-upload>
action为上传文件的地址,可手动拼接
若需要token验证,可添加:header="header"
headers: {
Authorization: Cookies.get('token')
//从cookie里获取token,并赋值 Authorization ,而不是token
}
结论:以上方法可以实现需求。
更多推荐
已为社区贡献1条内容
所有评论(0)