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)
);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容