前端上传文件总结

1.使用formData上传，传递给后端

　兼容：只兼容到ie10

　思路：antdUpload组件手动上传，获取文件流传递给后端

interface UploadWrapperProps {
    value?: any;
    onChange?: (value: any) => void;
    action?: string;
}
const UploadWrapper = ({ value, onChange, action, ...resetProps }: UploadWrapperProps) => {
    const [ fileList, updateFile ] = useState(value ? [ value ] : null);
    function beforeUpload(file: any) {
        if (!textFileName(file.name)) {
            file.status = 'error';
            message.error(`仅支持上传p8格式文件`);
        }
        updateFile([ file ]);
        const formData = new FormData();
        formData.append('formFile', file);
        onChange && onChange({ formData, name: file.name });
        return false;
    }

    function onRemove() {
        updateFile([]);
        onChange && onChange(null);
    }

    function textFileName(fileName: string) {
        let reg = /\.(p8)$/;
        return reg.test(fileName);
    }

    return (
        <>
            <Upload
                name="formFile"
                {...resetProps}
                beforeUpload={beforeUpload}
                fileList={fileList!}
                onRemove={onRemove}
            >
                <Button icon={<UploadOutlined />}>上传文件</Button>
            </Upload>
        </>
    );
};

　子组件传递formData给父组件，父组件拿到formData传递给后端，请求的header，content-type需要设置为multiparty/formData

2.使用fileReader读取文件数据进行上传

　　兼容：只兼容到ie10

       优点：可以准确知道什么时候，上传完成，也可以方便地接收回调

       思路：antdUpload组件手动上传，发送base64数据给后端然后返回该数据对应块对应的地址，以下只显示核心代码

 <Upload
        name="avatar"
        listType="picture-card"
        showUploadList={false}
        beforeUpload={beforeUpload}
        onChange={handleChange}
        {...restProps}
        >
        <UploadButton />
</Upload>
const [imgUrl,setImgUrl] = useState()
const [data,setData] = useState()
function getBaseUrl(){
   const fileInfo = new FileReader();
     fileInfo.readAsDataURL(file);
      fileInfo.onload = function(event){
            // 获得base64可用于预览
             const base = event.target.result;
               setImgUrl(base)
               setData(data)
      }      
}

//  同一进行手动上传，需要在beforeUpload中return false，传递data给父组件，将data发送请求给后端

3.   经典的form和input上传

  兼容：使用简单方便，兼容性好，基本所有浏览器都支持。 

  思路：使用input选择文件，设置好其他input的值，点击提交，将文件数据及签名等认证信息发送到form设置的action对应的页面，浏览器也会跳转到该页面。

   触发提交：form表单提交数据的方式有2种，一种是在页面上点击button按钮或<input type='submit'>按钮触发，第二种是在js中执行form.submit()方法，这是最早接触上传的一种方法

<form action='url' enctype="multipart/form-data" type='post'>
　　<input type='file'>
　　<input type='hidden' name='userid'>
　　<input type='hidden' name='signature'>
　　<button>提交</button>
</form>

　　

4.   上传到阿里云oss

   思路：请求后端地址，后端会给我们返回一个上传的oss地址，然后我们传递给后端返回的oss地址需要的参数，参数:包含 dir、expire、host、accessId、policy、sinature等

   <Upload
        name="avatar"
        listType="picture-card"
        style={style}
        showUpdateList={false}
        action={uploadApi(uploadOption)}
        beforeUpload={beforeUpload}
        onChange={handleMultipleChange}
        {...restProps}
    >
        上传
  </Upload>

 

// 请求：
// 请求链接上带上token
const uploadUrl = `/api/upload?_csrf=${getCookie('csrfToken')}`;
export function upload(opts: Options = {}) {
    const query = qs.stringify(opts as any) || '1=1';
    return `${uploadUrl}&${query}`;
}

　　

// 此处后端返回地址，前端请求oss地址传递参数，博主是在node层做的处理
// 获取返回的url:
// 在handleChange中，可以获取到上传oss成功后返回的url如
function  handleChange(info){
　　if(info.file.status ==='done'){
　　　　retrun info.file.response.url
    }
   retrun
}

　　

参考：https://www.cnblogs.com/soraly/p/8441589.html

点赞👍+关注我吧~

成为更好的自己