前端文件(图片)上传

• 在angular+ZERRO中

// h5代码
<nz-upload (nzChange)="handleChange($event)" nzListType="picture-card" [nzAction]='' [(nzFileList)]="fileList">
	<div>上传图片</div>
</nz-upload>
//--------------------------------------------------------------------------------------------------------------------------
// ts代码
1. (nzChange)	上传文件改变时的状态。
2. [nzListType]	上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card。
3. [nzAction]	必选参数, 上传的地址。可以为空，因为是写自定义的方法上传。
4. [nzFileList]	文件列表，双向绑定。

fileList: NzUploadFile[] = [];
// 上传图片的时候，让状态为done，不然会标红。
  handleChange(info: { file: NzUploadFile }): void {
    switch (info.file.status) {
      case 'uploading':
        this.fileList[0].status = 'done'
        break;
      case 'done':
        this.fileList[0].status = 'done'
        break;
      case 'error':
        this.fileList[0].status = 'done'
        break;
    }
  }

handleOk(i, id, nameval): void {
    let formData = new FormData();
    this.fileList.forEach(item => {
      formData.append('file', base64TransFile(item.thumbUrl, 'img' + item.size));
    });
    postImg(formData).then(res => {
      this.imgUrl = res.msg
    }).then(() => {
      this.putMenuName(id, nameval);
      this.isVisible[i] = false;
      this.message.create('success', '修改成功');
    })
  }
  
  //axios接口post方法-----------------------------------------------------------------------------------------------
  export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url: url,
            data: params, //必须放这
            headers: headers
        }).then(res => {
            resolve(res.data)
        }).catch(error => {
            reject(error.data)
        })
    })
}
//将base地址转换为文件格式----------------------------------------------------------------------------------------------
function base64TransFile(base64Url, fileName) {
  将图片Base64 转成文件
  var arr = base64Url.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    str = atob(arr[1]),
    n = str.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = str.charCodeAt(n);
  }
  return new File([u8arr], fileName, { type: mime });
}
//说明---------------------------------------------------------------------------------------------------------------
1. 当我们点击上传图片，弹出文件浏览框，选中图片，页面上显示图片。这一步由ZERRO封装好了。
2. [(nzFileList)]="fileList" 双向绑定图片。
3. 此时页面有图片的预览，但并未将图片上传至后端。
4. 当通过一些事件触发某些方法。比如handleOk().
5. 注意：formData.append('file', base64TransFile(item.thumbUrl, 'img' + item.size)); //第一个参数为后端接口规定的参数。

说明：后端需要的图片是file的格式。所以在前端我们需要post的时候带的是data参数(axios为例)。而且必须要以Formdata对象实例的格式格式一下。

• 原生模式下

// h5代码--------------------------------------------------------
<input type="file" multiple accept="image/*" onchange="uploadImg()"/>
1. type="file" //定义支持的文件类型。
2. multiple  //一次选中多个，而不是多次选中。
3. accept //设置文件选择的类型
4. onchange //当用户改变input输入框内容时执行。

// JavaScript代码-----------------------------------------------
<script>
    function uploadImg() {
    	console.log(event) //打印出event
       	console.log(event.target.files) //打印出文件列表
    	let formdata = new FormData;
    	formdata.append('xx接口规定的参数', event.target.files[0]);
    	methodPost(formdata).then(res =>{})
    }
</script>

// 如果想一次上传多个文件怎么办？
<script>
    function uploadImg() {
    	let files = event.target.files; //把整个图片列表给files
    	let formdata = new FormData;
        for(let i = 0; i < files.length; i++){ //不能通过foreach()这种遍历方法，因为files并非数组
            console.log(files[i])
            formdata.append('xx接口规定的参数', files[i]);
        }
    	methodPost(formdata).then(res =>{})
    }
</script>

// 如果想限制文件类型和大小怎么做？
<script>
    function uploadImg() {
    	let files = event.target.files; //把整个图片列表给files
    	let formdata = new FormData;
        for(let i = 0; i < files.length; i++){ //不能通过foreach()这种遍历方法，因为files并非数组
            console.log(files[i])
            let imgMaxSize = 1024 * 1024 * 4; //4MB
        	// 限制文件类型
        	if (['jpeg', 'png', 'gif', 'jpg'].indexOf(files[i].type.split("/")[1]) < 0) {
            	alert("仅可以上传图片格式文件");
            	return;
        	}
        	//限制大小
        	if (files[i].size > imgMaxSize) {
            	alert("文件最大为4MB");
            	return;
        	}
            formdata.append('xx接口规定的参数', files[i]);
        }
    	methodPost(formdata).then(res =>{})
    }
</script>

// 如果想有预览功能？
预览思路： 获取文件file -> URL.createObjectURL(file) -> 获取图片 url地址数组 -> 创建img标签添加url，添加到dom  -> 完成预览。