精华内容
下载资源
问答
  • iView 主要服务于 PC 界面的中后台业务,是一套高质量的开源 UI 组件库。这篇文章主要介绍了iView 上传组件之手动上传功能,需要的朋友可以参考下
  • iview上传组件跨域问题

    千次阅读 2019-03-28 17:30:18
    iview上传组件,如下图: 后台地址:uplaodUrl: this.$host + "/file/upload" 后端处理: 已经添加了@CrossOrigin允许跨域请求(其他post或get请求都可以通过),上传文件时却总出现跨域问题: Access to ...

    用iview上传组件,如下图:
    在这里插入图片描述
    后台地址:uplaodUrl: this.$host + "/file/upload"
    后端处理:
    在这里插入图片描述
    已经添加了@CrossOrigin允许跨域请求(其他post或get请求都可以通过),上传文件时却总出现跨域问题:

    Access to XMLHttpRequest at 'http://localhost:8888/file/uplaod'from origin 'http://localhost:8080' has been 
    blocked by CORS policy: Response to preflight request doesn't pass access control check: 
    No 'Access-Control-Allow-Origin' header is present on the requested resource.
    

    这里找到了答案。

    上传文件的请求不是简单的请求类型,所以浏览器会预先发送一个OPTIONS请求,得到服务器端的200状态或者204状态后再继续发送POST请求,而这个OPTIONS请求是不带cookie的(是的,不论你怎么设置都不带)。如果你的服务器端没有对OPTIONS请求做特殊关照,而是无论什么请求对一概先验证session,就悲剧了(肯定验证不过啊)。
    知道了原因,处理的办法就很简单,服务器端先查验请求的方法,如果是OPTIONS,不验证权限,直接返回200。

    所以创建了过滤器:
    在这里插入图片描述

    可以上传了,问题解决!

    展开全文
  • // 遇到的问题就是:在把上传文件的数组提交给后台时,后台一直提示上传的文件为空,收不到前台的上传文件,原因可能是: // 第一种原因:看handleUpload()方法是否绑定到dom了,上传文件前的方法一定要写上,要...

    <template>

    <Card style="width:100%;height:700px;">

    <p slot="title">

    <Icon type="ios-film-outline"></Icon>

    发布公告

    </p>

    <Form :model="formItem" :label-width="80">

    <FormItem label="公布标题" style="width:40%">

    <Input v-model="formItem.input" placeholder="请输入公告标题" type="text"></Input>

    </FormItem>

    <FormItem label="公布内容">

    <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 12,maxRows: 15}" placeholder="请输入公布内容"></Input>

    </FormItem>

     

    <FormItem label="上传文件" style="width:30%;">

    <Upload :before-upload="handleUpload" multiple action="">

    <Button icon="ios-cloud-upload-outline">请选择附件</Button>

    </Upload>

    <div>

    <ul>

    <li v-for="(item,index) of formItem.filelist" style="display:inline-block;margin-right:20px;">

    <span>{{ item.name }}</span>

    <Icon type="md-close" @click="handleRemove(index)"/>

    </li>

    </ul>

    </div>

    <!-- <Button type="info" icon="android-add" @click="uploadFile">上传</Button> -->

    </FormItem>

    <FormItem>

    <Button type="primary" @click="submitEvent">提交</Button>

    <Button style="margin-left: 8px">取消</Button>

    </FormItem>

    </Form>

    </Card>

    </template>

    <script>

    // 多文件 多上传接口

    export default {

    name: 'naticeRelease',

    data () {

    return {

    formItem: {

    input: '',

    textarea: '',

    file: {}, //保存临时文件

    fileId:'', //保存文件id

    filelist: []

    }

    }

    },

    methods: {

    handleUpload(selectFile){ //绑定上传文件的dom属性

    console.log(selectFile);

    // this.formItem.file = selectFile;

    this.formItem.filelist.push(selectFile);

    return false;

    },

    uploadFile(file){ //上传文件

    console.log('点击了上传');

    //alert(this.formItem.file.name);

    if(this.formItem.filelist.length == 0){

    alert('无上传文件');

    }else{

    var formData = new FormData();

    // formData.append('file',this.formItem.file); //formData里面是单个文件

    // formData.append('files',this.formItem.filelist);//formData里面直接放一个数组,后台接收不到附件内容,一直报空附件

    for(const ele of this.formItem.filelist) {

    formData.append('files',ele); //formData里面放多个文件

    }

    this.$ajax.post('/dvlpdocinf/upfileSin',formData).then(resp=>{

    console.log('上传附件的返回值:',resp.data);

    if(resp.status==200){

    this.formItem.fileId = this.formItem.fileId+","+resp.data.ID;

    alert(resp.statusText || "上传成功!");

    }else{

    alert(resp.returnMsg || "上传失败!");

    }

    })

    }

    },

    handleRemove(file){ //删除文件

    //请求后台,删除文件id

    // this.formItem.file = {};

    //this.formItem.filelist.remove(file);

    this.formItem.filelist.splice(file,1);

    this.formItem.fileId = '';

    },

    submitEvent(){ //提交事件

    console.log('触发了提交');

    let params = {

    fileId:this.formItem.fileId

    };

    let httpConfig = {

    method: 'POST',

    url: '/dvlpdocinf/upDocInfo',

    params: params

    };

    this.$ajax(httpConfig).then(resp => {

    console.log('返回数据:',resp.data);

    })

    }

    }

    }

     

    // 遇到的问题就是:在把上传文件的数组提交给后台时,后台一直提示上传的文件为空,收不到前台的上传文件,原因可能是:

    // 第一种原因:看handleUpload()方法是否绑定到dom了,上传文件前的方法一定要写上,要获取到待上传的文件。

    //第二种原因:// formData.append('files',this.formItem.filelist); //formData里面直接放一个数组,后台接收不到附件内容,一直报空附件  用for of循环; formData.append('files',ele); //formData里面放多个文件,这样后台就可以接收到formData里面的附件内容了

    var formData = new FormData();

    // formData.append('file',this.formItem.file); //formData里面是单个文件

    // formData.append('files',this.formItem.filelist);//formData里面直接放一个数组,后台接收不到附件内容,一直报空附件

    for(const ele of this.formItem.filelist) {

    formData.append('files',ele); //formData里面放多个文件

    }

    </script>

     

    展开全文
  • 主要介绍了iview Upload组件多个文件上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了使用iView Upload 组件实现手动上传图片的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 在做项目的过程中,使用了iview的upload上传组件,刚开始图片上传没有问题,但是通过data传参时,nodejs后台怎么也接收不到参数,一直显示“{}”。 然后,通过百度各种查询,也一直未找到合适的解决方案。心情那叫...

    在做项目的过程中,使用了iview的upload上传组件,刚开始图片上传没有问题,但是通过data传参时,nodejs后台怎么也接收不到参数,一直显示“{}”。

    然后,通过百度各种查询,也一直未找到合适的解决方案。心情那叫一个沉重啊,我开始思考,为什么一切正常,参数却无法接收。于是,按照程序员解决问题的惯例,打开F12。检查网络请求,看到请求,恍然大悟:

    这用的是Form Data!怪自己大意了。我用的是express框架,用require('body-parser'),这个中间件来接收数据,但我的req.body总是为{}。最后我发现body-parser并不支持contentType: multipart/form-data的格式类型,也就是不支持formData格式。于是,我就是用multiparty中间件对formData类型的数据进行处理。结果成功接收到了数据。

    下面我把代码贴出来,供大家参考:

    前端代码

    <template>
        <Upload
             ref="upload"
             :headers="{'Authorization':'Bearer '+token}"
             :show-upload-list="false"
             :default-file-list="defaultList"
             :on-success="handleSuccess"
             :format="['jpg', 'jpeg', 'png']"
             :max-size="2048"
             :on-format-error="handleFormatError"
             :on-exceeded-size="handleMaxSize"
             :before-upload="handleBeforeUpload"
             multiple
             type="drag"
             :action="uploadUrl"
             :data="uploadData"
             style="display: inline-block;width:58px;"
          >
    </template>
    <script>
    export default {
     data() {
        return {
          uploadData:{userId:JSON.parse(localStorage.getItem("userInfo")).userId},
        }
      }
    }
    </script>
    

    后端代码

    router.post('/avatar', (req, res) => {
         var form = new multiparty.Form();
         form.uploadDir = "./public/images";
         form.parse(req, function (err, fields, files) {
             let userId=fields.userId[0];
             if (err) {
                 throw err;
             } else {
               //新图片名
               //let avatar=userId+'.'+files.file[0].originalFilename.split('.')[1];
                let avatar=files.file[0].originalFilename;
               //同步重命名文件名
                fs.renameSync(files.file[0].path, "./public/images/" + files.file[0].originalFilename);
                 var sql=`update user set avatar=? where userId=?`;
                 query(sql,[avatar,userId]).then(result=>{
                    if (result.affectedRows > 0) {
                        res.send({
                            code: 200,
                            avatar:avatar,
                            msg: 'updateAvatar success'
                        });
                    } else {
                        res.send({
                            code: 401,
                            msg: 'updateAvatar error'
                        });
                    }
                 });
               
             }
         })
     })

    最后打印出来的数据如下图:

    以上就是解决这个问题的一些方法,希望对遇到同样问题的朋友,有所帮助。 

    展开全文
  • iview upload + iview组件手动上传文件

    千次阅读 2019-08-12 17:53:26
    iview upload组件官方文档 上传文件 1.手动上传文件的页面代码 <template> <div> <Upload ref="upload" multiple :max-size="51200" :defa...

    iview upload组件官方文档

    上传文件

    1.手动上传文件的页面代码

    	<template>
        <div>
            <Upload
                    ref="upload"
                    multiple
                    :max-size="51200"
                    :default-file-list="defaultList"
                    :show-upload-list="false"
                    :on-success="handleSuccess"
                    :before-upload = "handleUpload"
                    :action="uploadFileUrl"
                    :headers="accessToken">
                <Button icon="ios-cloud-upload-outline">上传附件</Button>
            </Upload>
            <div v-for="(item, index) in file">Upload file: {{ item.name }}
                <a href="javascript:;" rel="external nofollow" @click="deleteFile(item.name)">X</a>
                <Button style="margin-left:30px;"
                        size="small"
                        v-if="index === 0"
                        type="primary"
                        @click="uploadFile"
                        :loading="loadingStatus">上传</Button>
            </div>
        </div>
    </template>
    

    2.data块的代码

    				defaultList:[],
    				//上传文件的URL
                    uploadFileUrl:uploadFileUrl,
                    loadingStatus:false,
                    //设置上传的请求头部
                    accessToken:"",
                    files:[],
                    uploadFiles:[]
    

    3.方法

    			init(){
    				//设置上传的请求头部
                    this.accessToken = {
                        accessToken: this.getStore("accessToken")
                    };
                }
    

    4.上传前的准备

    			handleUpload(file){
                    let keyID = Math.random().toString().substr(2);
                    files['keyID'] = keyID;
                    // 保存文件到总展示文件数组里
                    this.files.push(file);
                    // 保存文件到需要上传的文件数组里
                    this.uploadFiles.push(file);
                    // 返回 false 停止自动上传 我们需要手动上传
                    return false;
                },
    

    5.删除选错的文件

    	deleteFile (name) { 
    				// 删除文件
                    // 删除展示文件里的当前文件
                    this.files = this.files.filter(item => {
                        return item.name != name
                    })
                    // 删除需要上传文件数据里的当前文件
                    this.uploadFiles = this.uploadFiles.filter(item => {
                        return item.KeyID != name
                    })
                },
    

    6.点击上传

    		uploadFile(){
                    this.loadingStatus = true;
                    for (let i = 0; i < this.uploadFile.length; i++) {
                        let item = this.file[i];
                        this.$refs.upload.post(item);
                    }
                    this.loadingStatus = false;
                }	
    

    7.上传成功清除文件列表

    		handleSuccess(res,file){
                    //上传成功后清空文件列表
                    this.file = [];
                    this.uploadFile = [];
                    console.log(res);
                    console.log(file);
                },
    
    展开全文
  • Vue原生上传文件 原生input支持上传文件 定义type类型,隐藏样式 第三定义change事件拿到file 的相关信息,accept限制支持的文件类型 然后给button增加点击事件 template部分 &amp;amp;amp;lt;template&...
  • 先上代码,注解在下面 ...<template> <Upload multiple action="Api/api/sys/fileController/uploadFile" :before-upload="handleUpload" :data="fileData" :on-success="successEvent" ...上传<
  • 上传文件iView组件

    万次阅读 2018-06-25 16:58:14
    &lt;Upload   ref="upload"  :before-upload="handleUpload"//上传之前调用  :show-upload-list="false"  :on-success="uploadSuccess2"//上传成功调用  ...
  • iView upload组件手动上传、图片预览 手动上传 iview文档中并没有实际的上传操作 实现 <Upload ref="upload" :format="['jpg','jpeg','png']" :before-upload="handleUpload" type="drag" :show-upload-...
  • iview 文件上传 .vue

    2021-01-08 11:10:16
    iview 文件上传 .vue
  • iview Upload组件多个文件上传

    千次阅读 2018-08-10 18:23:00
    使用 iview Upload 上传组件 手动上传 包括单个文件和多个文件 思路:创建一个数组 把需要上传的文件 push到这个数组里面 1.引用组件 2.手动上传,根据官方文档 设置:before-upload ="handleUpload"等于false (1...
  • 可以直接放到组件里用, “action”改为自己的接口路径; 效果:点击看效果图 <template> <Form :model="formItem" :label-width="80"> <FormItem label="文件名称"> <Input v-model="form...
  • 最近做上传模块中用到了批量相册管理,使用了iView中的相册组件组件文档地址:https://www.iviewui.com/components/upload 先上个效果图 主要遇到的难点是对应文档中的参数不知道如何写,在群里热心人帮助后...
  • iview Upload组件的坑

    千次阅读 2019-07-08 09:26:00
    iview Upload 上传显示进度条的坑 直接先来光放代码 上官方文档 demo 代码 <template> <div class="demo-upload-list" v-for="item in uploadList"> <template v-if="item.status === 'finished'...
  • 参考博文:iview upload 上传图片前使用Promise判断高宽
  • import { Icon, Upload, Modal, Checkbox, Button, Progress } from "iView"; import { PostUploadFile } from "../../services/lesson/upload"; import { Random } from "../../services/utils/utils"; export ...
  • iview-admin-------上传组件Upload

    千次阅读 2018-11-12 14:34:36
    上传给后台 &lt;Upload  ref="upload"  :show-upload-list="false" 是否显示已上传文件列表  :default-file-list="defaultList" 默认已上传的文件列表  :on-success="...
  • 这几天遇到一个问题,在Upload组件上传之前需要添加一个Modal,阻止上传, 提示用户信息,用户点击确认按钮后,再进行上传, 理想总是很丰满,过程真是狗血呀 于是在API 也找到了方法,提供了一个before-upload...
  • iview upload组件 action和headers的使用

    千次阅读 2019-07-26 14:46:12
    贵公司出现一个需求 需上传附件 本人用的iview组件 恰巧里面有一upload组件 但出现一个问题 我的接口都是封装过的 导致不知道如何在action里面写自己的接口地址 如果你也遇到像我一样的问题 见下文 <Upload v-...
  • 最近由于开发需求,使用iview的Upload组件实现上传图片,但在开发过程中遇到了一个很困扰的问题:由于图片是延缓加载的,执行的过程其实是图片已经上传之后才会去调用检测图片大小的方法,没有达到预期的目的,官方...
  • 上传图片图片返回的地址在浏览器中可以显示,但是在页面中去显示不了,最好发现是后端返回地址有问题 http:192.168.0.137/data/5a3c0f9721c04ead8352de010562f855.png 这种路径在浏览器会自动补全,但是在页面中...
  • 这是代码type="select"action=...上传图片&用能境战求道...
  • 该资源时自己根据iview的upload组件封装的上传图片组件,目前一次性上传多张,预览会有问题。
  • 前端: <Uploadaction="":before-upload="handleBeforeUpload"> <Icontype="ios-add-circle-outline"/>...//上传文件 handleBeforeUpload(file){ varforms=newFormData() forms...
  • iview upload上传文件(自动上传、手动上传) 自动上传,不需要附带其他除文件外的信息 手动上传,除文件之外,还需要附带其他信息,如文件描述等等,一起上传 重点在于设置请求头部为 'Content-Type': 'multipart/...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,665
精华内容 666
关键字:

iview上传组件