.net + angular实现前后端附件上传保存删除及预览功能

狂狼大白鲨

已于 2024-07-11 18:00:33 修改

阅读量414

点赞数 5

文章标签： angular.js 前端 javascript .netcore

于 2024-07-02 15:34:31 首次发布

本文链接：https://blog.csdn.net/weixin_51977690/article/details/140126772

版权

附件上传功能

前端

主要是通过原生态的input ·type = ‘file’·提供文件选择器，当文件选择发生变化时。当事件发生时，它会调用组件类中的uploadFile方法，并将事件对象（$event）作为参数传递。

* html *
<input
    class="file-upload-button"
    type="file"
    (change)="uploadFile($event)"
/>

获取文件对应的file数据，其中包含相关的fileName、fileContent、fileType

const file = $event.target.files[0];

当你通过元素选择文件后，这个元素会持有一个FileList对象（即使只选择了一个文件也是如此，但FileList在这种情况下只包含一个File对象）。你可以通过访问这个元素的files属性来获取这个FileList对象，然后可以遍历或访问特定的File对象。

每个File对象都包含了一些有用的属性，如：

name：文件的名称，包括扩展名（如果有的话）。
type：文件的MIME类型（例如，“image/png”）。
size：文件的大小，以字节为单位。

但是，File对象本身并不直接包含文件的实际内容。如果你需要访问文件的内容（例如，为了上传或处理文件），你可能需要使用FileReader API来读取文件内容。FileReader API 提供了一系列的方法来读取文件，如readAsText()（读取文件内容为文本）、readAsDataURL()（读取文件内容为一个DataURL，即一个包含文件内容的base64编码的URL）或readAsArrayBuffer()（读取文件内容为一个ArrayBuffer对象，这允许你以二进制形式处理文件）。

uploadFile(event:any){
	const file = event.target.files[0];
	var upload = {
		filename = file.name //文件名
		filecontent = //文件内容 base64数据格式
		fileType = file.type//文件类型
	}
	getBase64(file , (f,string)=>{
		upload.filecontent = f
	})
	
	/*
	这部分就可以实现后端接口将得到的upload对象传递给后端，保存下来
	*/
	uploadService.saveFile(upload);
	
}

getBase64(f: File, callback: (f: string) => void): void {
       // 创建一个FileReader实例  
        var reader = new FileReader();  
  
        // 读取文件内容完成后的回调函数
        //FileReader 有一个 onload 事件处理器
        //当文件读取完成并且结果可用时，这个处理器会被用。在 onload 事件处理器的回调函数中
        //你可以通过 event.target.result 访问到 DataURL。这个 DataURL 是一个字符串，
        //包含了文件的 Base64 编码内容，前面还带有表示文件类型的 MIME 类型的 data: 前缀  
        reader.onload = function(e) {  
            // e.target.result 包含了文件的内容  
            ()=> callback（e.target.result）;  
  
            // 现在你可以使用fileContent变量了，比如上传到服务器  
            console.log(fileContent);  
            // 或者执行其他操作...  
        };  
        // 使用readAsDataURL()方法读取文件内容  
        reader.readAsDataURL(f); 
}