van-uploader禁止上传heic图片

官方说明

 caniuse 兼容性0%

 禁止上传heic

async beforeRead(file) {
    return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.onload = function(result) {
            let buffer = new Uint8Array(result.target.result);
            if (!buffer || buffer.length < 24) {
                buffer = null;
                result = null;
                Toast("文件错误")
                reject();
            }
            if(buffer[20] === 0x68 && buffer[21] === 0x65 && buffer[22] === 0x69 && buffer[23] === 0x63){
                buffer = null;
                result = null;
                Toast("暂时不支持heic文件")
                reject();
            }
            buffer = null;
            result = null;
            resolve();
        }
        reader.readAsArrayBuffer(file);
    });
},

`Van-Uploader`是一个基于Vue.js的轻量级文件上传组件库,它可以帮助你在前端实现文件上传功能,包括图片。当你使用van-uploader上传图片时,它通常返回一个Promise对象,该对象解析后会包含上传过程中的一些信息,如上传的文件对象。 例如,在使用van-uploader的基本用法中,你可以这样处理图片对象: ```javascript <template> <van-uploader v-model="fileList" :action="uploadUrl" :auto-upload="false" @before-upload="beforeUpload" @success="handleSuccess" @error="handleError" ></van-uploader> </template> <script> export default { data() { return { fileList: [], uploadUrl: 'your-api-url', // 图片上传的URL }; }, methods: { beforeUpload(file) { const isImage = (file.type === 'image/jpeg' || file.type === 'image/png'); if (!isImage) { this.$message.error('只支持上传图片!'); return false; } return true; }, handleSuccess(res, file) { console.log('图片上传成功:', res); // 这里res可能会包含一个file对象,例如File API的File对象 const imgObject = res.data; // 假设API返回的是图片数据 // 可以在这里处理图片对象,比如赋值给变量或者展示在页面上 }, handleError(err, file) { console.error('图片上传失败:', err); }, }, }; </script> ``` 在这个例子中,`handleSuccess`函数里的`res`就是上传成功的响应,它通常包含服务器返回的数据,这可能包括一个图片的URL或者Base64编码的图片内容,而不是原始的图片对象。如果你需要操作图片,可能需要进一步处理服务器返回的数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值