vue vant 使用ajax上传文件注意事项

vue vant 触上传文件方法
//上传文件组件 https://youzan.github.io/vant/#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi
<van-uploader :after-read="afterRead"  v-model="product.images"  :name="index" max-size="1024*1024*2" max-count="3"></van-uploader>
afterRead(file, index) {
    console.log(index);

    // 自定义form表单
    let data= new FormData();
    data.append('iFile',file.file);
    
    $.ajax({
        type:"post",
        url:"/index.php?s=home/upload/image",
        data: data,
        contentType: false,
        // 不进行 urlencode转换
        processData: false, 
        success:function(res){
            console.log(res.data);

        }
    });
},
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用Vant的Upload组件和pdf.js库来实现移动端的PDF文件上传和预览功能。 首先,在你的Vue项目中安装Vant和pdf.js库: ``` npm install vant pdfjs-dist --save ``` 然后,在你的组件中引入Upload组件和pdf.js库: ```javascript <template> <div> <van-upload :max-count="1" :before-read="beforeRead" :after-read="afterRead" accept="application/pdf" :show-upload="false" > <van-button type="primary">上传文件</van-button> </van-upload> <div ref="pdfContainer"></div> </div> </template> <script> import { Upload, Button } from 'vant' import pdfjsLib from 'pdfjs-dist' export default { components: { VanUpload: Upload, VanButton: Button, }, methods: { beforeRead(file) { // 判断文件类型是否为PDF return file.type === 'application/pdf' }, afterRead(file) { // 读取文件并渲染PDF预览 const reader = new FileReader() reader.readAsArrayBuffer(file) reader.onload = () => { pdfjsLib.getDocument(new Uint8Array(reader.result)).promise.then(pdf => { pdf.getPage(1).then(page => { const canvas = document.createElement('canvas') const scale = 1.5 const viewport = page.getViewport({ scale }) const context = canvas.getContext('2d') canvas.height = viewport.height canvas.width = viewport.width page.render({ canvasContext: context, viewport }).promise.then(() => { this.$refs.pdfContainer.innerHTML = '' this.$refs.pdfContainer.appendChild(canvas) }) }) }) } }, }, } </script> ``` 在上面的代码中,我们使用Vant的Upload组件来实现文件上传功能,并且设置了只能上传PDF文件。在afterRead方法中,我们使用pdf.js库来读取上传的PDF文件,并将PDF渲染到页面上。 需要注意的是,pdf.js库会异步加载PDF文件,因此我们需要在Vue组件中使用promise来处理异步操作。此外,为了在页面上显示PDF预览,我们需要使用canvas元素来渲染PDF页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值