Vue+Django表单发送文件

场景：有一个文件，该文件被选择后不能立即发送，而是需要作为一个附件随表单一起发送到Django后端

1.设置el-input的name属性

<el-form-item label="附件" prop="file">
      <el-input type="file" value="ruleForm.messageFile" v-model="ruleForm.messageFile" name="file"></el-input>
</el-form-item>

2.使用getElementsByName获取附件对象

let fileObj = document.getElementsByName('file')[0].files[0];
let formData = new FormData();
formData.append('annex', fileObj);

3.将附件对象加入formData

axios.post("/api/notice/createMessage/", formData,{
        headers:{"Content-Type":"application/json;charset=utf-8"} })
        .then(function (response) {
               if(response.status == '201'){
                        this.$message({
                                type: 'success',
                                message: "表单发送成功"
                         });
                         window.location.reload();
                 }
                 else{
                        this.$message({
                               type: 'error',
                               message: response.data
                        });
                  }}
        .bind(this)
);