Vue部分,使用el-upload组件
<!--action必须要有,但是通过其他按钮触发,不通过submit()触发-->
<!--accept限制上传文件类型-->
<!--file-list绑定文件变量-->
<el-uploadaction="":auto-upload="false"accept=".zip":file-list="fileList":on-change="fileChange"
><el-button>选择压缩包</el-button>
</el-upload>
<el-button type="primary" @click="submitUpload">上传后端</el-button>
JS函数部分
submitUpload() {// 可以绑定refs通过submit提交// this.$refs.uploadPackage.submit()var formData = new FormData()formData.append('file', this.fileList[0].raw) // 去文件列表第一个的raw属性!!!重点!!!formData.append('otherAttr', '其他属性')axios.post('http://127.0.0.1:8000/test/upload/', formData, {headers: {'Content-Type': 'multipart/form-data' // 选择formData格式传输}})
},
Django部分
# Django的request对象会自动解析multipart/form-data编码的数据,并将它们填充到
# request.POST(对于非文件字段)
# request.FILES(对于文件字段)
def test(request):print('request.POST', request.POST)print('request.FILES', request.FILES)file = request.FILES.get('file')otherAttr = request.POST.get('otherAttr')# 可以将文件保存在对应路径savePath = BASE_DIR + r'\upload'fileObj = FileSystemStorage()fileObj.save(savePath, file)