当从angular提交时，在/media/C:/fakepath/example.png进行可疑文件操作

Question

我正在构建一个Angular+Django项目，用户可以在其中将文件上传到模型：

型号：

def upload_path(instance, filename):
return '/'.join(['files', str(instance.titulo), filename])
class File(models.Model):
titulo = models.CharField(max_length=154, null=False, blank=False)
file = models.FileField(upload_to=upload_path, null=False)

当我通过Insomnia发送帖子请求时，一切都很好，文件保存在媒体根目录(媒体(中，但当我通过Angular发送时，它保存的路径与标题相似，因此会发生错误。

角度：

<div class="row">
<label style="margin-left: 10px;">Anexos</label>
<label id="label-input">
<input [(ngModel)]="ticket.file" type="file" single id="input-file">
</label>
</div>

服务：

htttpHeaders = new HttpHeaders().set("Content-Type", "application/json").set('Authorization', this.token);
public saveNewTicket(ticket): Observable<any> {
return this.http.post(this.baseUrl + "ticket/", ticket, {
headers: this.htttpHeaders
});
}

Answer 1

问题是我以json的形式发送数据，发送文件或图像需要以如下的多部分/形式数据：

HTML:

<form>
<label id="thumbnail">
<input type="file" class="file_selector" (change)=(onFileSelected($event)) />
</label>
<button class="btn btn-success" (click)="onUpload()" style="float: right;">Salvar Anexo</button>
</form>

TS：创建了常量文件

onFileSelected(e) {
this.file = e.target.files[0];
}
onUpload() {
this.crudService.updateFile(this.business.id, this.file).subscribe(data => {
console.log(data);
}, err => {
console.error(err);
});
}

crudService.ts：创建函数并实例化一个新的Form数据，而不仅仅是附加数据

public updateFile(ticketid, file): Observable<any> {
const body = new FormData();
body.append('id', ticketid);
body.append('files', file, file.name);
return this.http.put(this.baseUrl + 'ticket/' + ticketid + '/', body, {
headers: this.htttpHeadersFormData
});
}