前端上传文件总结

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

点赞👍+关注我吧~

成为更好的自己

posted @ 2020-12-16 14:45  文学少女  阅读(48)  评论(0编辑  收藏