Vue+Django上传文件

Hrational

已于 2024-05-30 10:28:09 修改

阅读量240

点赞数 1

文章标签： vue.js django javascript

于 2024-05-30 10:24:40 首次发布

本文链接：https://blog.csdn.net/sdkl_yi/article/details/139316283

版权

Vue部分，使用el-upload组件

<!--action必须要有，但是通过其他按钮触发，不通过submit()触发-->
<!--accept限制上传文件类型-->
<!--file-list绑定文件变量-->
<el-upload
  action=""
  :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)