精华内容
下载资源
问答
  • 前言:使用element上传图片之后,文件file下的url是blob:http//localhost:8080地址,后端不好处理 问题如上图所示采用比较...这是一个上传图片子组件demo点击上传export default {name: 'regShopImg',data () {re...

    前言:使用element上传图片之后,文件file下的url是blob:http//localhost:8080地址,后端不好处理

    问题如上图所示

    采用比较笨的js解决方法,将bolb文件打开,读取src属性(这是一个base64的数据流),把src的内容一起发送给后端。

    这是一个上传图片子组件demo

    点击上传

    export default {

    name: 'regShopImg',

    data () {

    return {

    imageUrl: '',

    imgthing: {}

    }

    },

    props: ['imgN', 'nameN'],

    methods: {

    changeUpload (file, fileList) {

    console.log(file)

    // 判断图片大小

    if (fileList[0].size < 1100000) {

    // 判断图片格式是否为jpg,png,jepg,gif

    var fileName=fileList[0].name

    // var suffixIndex=fileName.lastIndexOf(".")

    // var suffix=fileName.substring(suffixIndex+1).toUpperCase()

    var suffix = fileName.substring(fileName.lastIndexOf(".")+1).toUpperCase()

    if (suffix=="BMP"||suffix=="JPG"||suffix=="JPEG"||suffix=="PNG"||suffix=="GIF") {

    this.fileList = fileList

    this.$nextTick(

    () => {

    var i = this.imgN

    let uploadLists = document.getElementsByClassName('el-upload-list')

    let uploadListsN = uploadLists[i]

    let uploadListLi = uploadListsN.children

    uploadListsN.setAttribute('style', 'position: absolute;height: 160px;margin-top: 0;margin-left: 300px;width: 260px;overflow: hidden')

    let liA = uploadListLi[0]

    // 试着获取bolb里面的数据------------S

    //获取图片的Blob值

    function getImageBlob(url, cb) {

    var xhr = new XMLHttpRequest()

    xhr.open("get", url, true)

    xhr.responseType = "blob"

    xhr.onload = function() {

    if (this.status == 200) {

    if(cb) cb(this.response)

    }

    }

    xhr.send()

    }

    function preView(url){

    let reader = new FileReader()

    getImageBlob(url, function(blob){

    reader.readAsDataURL(blob)

    })

    reader.onload = function(e) {

    // 获取bolb里面数据时,生成预览

    var img = document.createElement("img")

    img.src = e.target.result

    // 获取bolb里面数据时,生成预览

    let imgElement = document.createElement('img')

    imgElement.setAttribute('src', fileList[0].url)

    imgElement.setAttribute('style', 'max-width:100%;padding-left:0')

    if (liA.lastElementChild.nodeName !== 'IMG') {

    liA.appendChild(imgElement)

    }

    // 把base64的信息放到imgthing的file里

    file.base64 = e.target.result

    }

    }

    preView(fileList[0].url)

    // 试着获取bolb里面的数据-------------E

    // 不获取bolb里面数据时,生成预览

    // let imgElement = document.createElement('img')

    // imgElement.setAttribute('src', fileList[0].url)

    // imgElement.setAttribute('style', 'max-width:100%;padding-left:0')

    // if (liA.lastElementChild.nodeName !== 'IMG') {

    // liA.appendChild(imgElement)

    // }

    }

    )

    // 修改nameN名字对应的数据,在一个页面使用多个不同字段图片上传,为了复用组件

    if (this.nameN === 'identityCard_Z') {

    this.imgthing.identityCard_Z = file

    }

    if (this.nameN === 'identityCard_F') {

    this.imgthing.identityCard_F = file

    }

    if (this.nameN === 'identityCard_S') {

    this.imgthing.identityCard_S = file

    }

    this.$emit('imgthing', this.imgthing)

    } else {

    this.$message.error('文件类型不正确,请重新上传!')

    }

    } else {

    this.$message.error('图片大小超过1M,请重新上传')

    }

    }

    }

    }

    // 上传

    .upload-demo{width:260px;height:160px;

    .upload_btn{width:260px;height:160px;background:#f2f2f2}

    .el-upload__tip{margin:0;float:left}

    }

    父组件上传demo

    提 交 资 质

    import RegShopImg from '@/components/common/regShopImg' //上传图片的子组件

    import Qs from 'qs' // post方式下引入qs插件字符串化传输信息

    export default {

    name: 'regShop',

    data () {

    return {

    active: 3, // 分步骤走的判定

    ajaxRegisterUrl: '', // 注册提交页面

    imgN: '', // 上传信息的名字对应的index序号

    nameN: '', // 上传信息的名字

    identityCard_Z: 'identityCard_Z',

    identityCard_F: 'identityCard_F',

    identityCard_S: 'identityCard_S',

    Imgthing: {}, //子组件上传的信息

    ruleForm: { // 提交信息的表单对象

    identityCard_Z: '',

    identityCard_F: '',

    identityCard_S: '',

    },

    rules: { // 必填判定规则

    identityCard_Z: [

    {required: true, message: '请上传身份证正面图片', trigger: 'blur'}

    ],

    identityCard_F: [

    {required: true, message: '请上传身份证反面图片', trigger: 'blur'}

    ],

    identityCard_S: [

    {required: true, message: '请上传手持身份证图片', trigger: 'blur'}

    ]

    }

    }

    },

    methods: {

    // 第三步:证件照片上传

    imgthing (imgthing) {

    // 合并对象

    this.Imgthing = Object.assign(this.Imgthing, imgthing)

    // 填充到ruleForm对应项,用来判断是否有数据

    this.ruleForm.identityCard_Z = this.Imgthing.identityCard_Z

    this.ruleForm.identityCard_F = this.Imgthing.identityCard_F

    this.ruleForm.identityCard_S = this.Imgthing.identityCard_S

    },

    // 总表单提交

    submitForm (formName) {

    this.$refs[formName].validate((valid) => {

    if (valid) {

    // 由于base64的数据流比较大,get方式放不下,必须采用post方式

    let data = Qs.stringify(this.ruleForm)

    this.$ajax.post(this.ajaxRegisterUrl, data)

    .then((res) => {

    console.log(res)

    if (res.status === 1) {

    this.$message.success('恭喜您,注册成功!')

    }

    })

    } else {

    this.$message.error('提交资料有误,注册失败!')

    return false

    }

    })

    }

    },

    components: {

    'RegShopImg': RegShopImg

    }

    }

    多添加了一个base64的数据

    另一种思路是利用element已有的方式,将图片上传和表单上传分开。

    图片上传只上传文件,利用上传成功handleAvatarSuccess(res, file)的方法,获取后端对上传图片存储位置的路径,并将其传给父组件。提交表单的时候,提交图片部分仅仅是路径。

    参考文档:

    展开全文
  • 引入elementUI组件(main.js文件)import Element from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(Element, { size: 'small' })3.访问Element官网【组件–Upload上传】act...

    1.安装elementUI:npm i element-ui -S

    2.引入elementUI组件(main.js文件)

    import Element from 'element-ui'

    import 'element-ui/lib/theme-chalk/index.css'

    Vue.use(Element, { size: 'small' })

    3.访问Element官网【组件–Upload上传】

    c8f240e1bbfc4e5238a670da299fb214.png

    action="https://jsonplaceholder.typicode.com/posts/"

    list-type="picture-card"

    :on-preview="handlePictureCardPreview"

    :on-remove="handleRemove">

    export default {

    data() {

    return {

    dialogImageUrl: '',

    dialogVisible: false

    };

    },

    methods: {

    handleRemove(file, fileList) {

    console.log(file, fileList);

    },

    handlePictureCardPreview(file) {

    this.dialogImageUrl = file.url;

    this.dialogVisible = true;

    }

    }

    }

    4.我的需求:点击保存按钮手动上传,只能上传一张图片,参数为userId

    4891030895864bf4ac91f24f3abb217c.png

    5.script中的data( )和methods( )如下:

    export default {

    data() {

    return {

    file:'',

    dialogImageUrl: '',

    dialogVisible: false,

    imgUrl:'',

    userId: '',

    uid:'',

    // 上传图片时附带的额外参数userId

    resData:{

    userId: window.localStorage["userId"]

    },

    };

    },

    methods: {

    handleRemove(file, fileList) {

    console.log(file, fileList);

    },

    handlePictureCardPreview(file) {

    this.dialogImageUrl = file.url;

    this.dialogVisible = true;

    },

    // 点击保存按钮上传图片

    submit2:function(res){

    this.$refs.upload.submit();

    },

    // 图片上传成功后,后台返回图片的路径

    onSuccess:function(res){

    // console.log(res);

    if(res.status==200){

    this.imgUrl=res.data.imgUrl;

    }

    },

    }

    }

    6.该组件的效果图如下:

    c48d2947813bf4755cb6e37fddf36022.png

    本文来源于网络:查看 >https://blog.csdn.net/weixin_39378691/article/details/83655052

    展开全文
  • const tbit = require('../tbit')// const filebtn = require("./filebtn")import filebtn from "./control/filebtn"import pager from "./control/pager.vue"export default {mounted:function (){var me = this// ...

    const tbit = require('../tbit')

    // const filebtn = require("./filebtn")

    import filebtn from "./control/filebtn"

    import pager from "./control/pager.vue"

    export default {

    mounted:function (){

    var me = this

    // this.a()

    this.admin = localStorage.username

    this.query()

    },

    components:{

    "filebtn":filebtn,

    "pager":pager

    },

    methods:{

    query(){

    this.internalquery(this.search || "",this.page||1)

    },

    async internalquery(search,page){

    var me = this

    this.page = page

    var query = `{user_list(page:${this.page},id:"${search}"){id,username,address,telephone,email,time,OnuId,ONUname,plan,TariffPackageId,actualtime}}`

    var response = await tbit.ql(query)

    this.items = response.data.data.user_list

    query = `{user_pages(search:"${search}")}`

    var response = await tbit.ql(query)

    this.pages = response.data.data.user_pages

    },

    //导出

    async doExport(){

    var query = `{download_user{filename,mimetype,content}}`

    let response = await tbit.ql(query)

    let filename = response.data.data.download_user.filename;

    let content = response.data.data.download_user.content;

    this.downloadFile(filename, content);

    },

    downloadFile: function(fileName, content) {

    const blob = this.base64ToBlob(content); // new Blob([content]);

    if (window.navigator.msSaveOrOpenBlob) {

    navigator.msSaveBlob(blob, fileName);

    } else {

    const link = document.createElement("a");

    link.href = window.URL.createObjectURL(blob);

    link.download = fileName;

    //此写法兼容可火狐浏览器

    document.body.appendChild(link);

    const evt = document.createEvent("MouseEvents");

    evt.initEvent("click", false, false);

    link.dispatchEvent(evt);

    document.body.removeChild(link);

    }

    },

    base64ToBlob: function(code) {

    const parts = code.split(";base64,");

    const contentType = parts[0].split(":")[1];

    const raw = window.atob(parts[1]);

    const rawLength = raw.length;

    const uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i) {

    uInt8Array[i] = raw.charCodeAt(i);

    }

    return new Blob([uInt8Array], { type: contentType });

    },

    closeUploadModal:function() {

    let modal = document.getElementById("UploadModal");

    modal.classList.remove("is-active");

    },

    doImport:function() {

    if(confirm('Whether or not to import users')==true){

    let modal = document.getElementById("UploadModal");

    modal.classList.add("is-active");

    }

    },

    //导入

    handlerUpload: async function(e) {

    //获取选定的文件

    var self = this

    let tFiles = e.target.files;

    let len = tFiles.length;

    if (len != 1) {

    alert(this.$i18n.t("Only one file can be uploaded"));

    return;

    }

    //将文件转base64

    let reader = new FileReader();

    reader.readAsDataURL(tFiles[0]);

    reader.onload = async function(e) {

    let query = `mutation{upload_user(fileContent:"${this.result}")}`;

    let response = await tbit.ql(query);

    if (response.data.data.upload_user == true) {

    alert("success");

    let model = document.getElementById("UploadModal");

    model.classList.remove("is-active");

    document.getElementById("file").value='';

    await self.query()

    } else {

    alert("upload file fail");

    document.getElementById("file").value='';

    }

    };

    },

    },

    data:function (){

    return {items:this.items,pages:1,page:1,search:"",money:this.money,username:"",actualincome:"",createdAt:"",address:"",telephone:"",admin:"",refundtime:""}

    }

    }

    title

    .uploadBox {

    width: 400px;

    border: 1px solid #ccc;

    margin: 100px auto;

    }

    .fileBox,

    .fileInfo {

    margin: 16px;

    height: 60px;

    line-height: 60px;

    border: 1px solid #ccc;

    padding-left: 16px;

    font-size: 16px;

    }

    .inputfile {

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    z-index: -1;

    }

    /*E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F*/

    .inputfile+label {

    color: #3e97df;

    display: inline-block;

    }

    .inputfile:focus+label,

    .inputfile+label:hover {

    color: #0c89f0;

    cursor: pointer;

    }

    h3 {

    padding: 10px 0 0 16px;

    font-weight: normal;

    font-size: 18px;

    color: #666;

    }

    .filePart {

    line-height: 30px;

    overflow: hidden;

    float: left;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;

    height: 30px;

    }

    .fileStatus {

    overflow: hidden;

    float: left;

    height: 20px;

    font-size: 10px;

    line-height: 20px;

    }

    .ml10 {

    margin-left: 10px;

    }

    .fileName {

    width: 200px;

    }

    .fileSize {

    width: 120px;

    text-align: center;

    }

    .uploadFail {

    color: #ff0800d3;

    }

    .uploadSuccess {

    color: #2c832c;

    }

    /*对应CSS*/

    .progress {

    position: relative;

    width: 80%;

    height: 8px;

    border: 1px solid #ccc;

    border-radius: 5px;

    overflow: hidden;

    /*注意这里*/

    box-shadow: 0 0 1px 0px #ddd inset;

    }

    .progress span {

    position: absolute;

    display: inline-block;

    width: 10%;

    height: 100%;

    background-color: #3e97df;

    }

    展开全文
  • vue中利用ref属性实现隔山打牛 效果图: 利用ref属性来实现隔山打牛 页面代码: <button ref="me" @click="aa">我是aa</button> <button @click="bb">隔山打牛</button> js方法: aa(){ ...

    vue中利用ref属性实现隔山打牛

    效果图:
    在这里插入图片描述

    利用ref属性来实现隔山打牛

    页面代码:

    <button ref="me" @click="aa">我是aa</button>
    <button @click="bb">隔山打牛</button>
    

    js方法:

    aa(){
          alert('我是aa');
        },
    bb(){
          // 点我出发aa事件
          this.$refs.me.click();
        }
    

    如果文章对你有帮助,麻烦点个赞,谢谢~

    展开全文
  • vue简单的上传文件

    2019-12-21 14:31:58
    点击按钮上传doc,docx,pdf 类型的文件 直接上代码 <Button @click="choicePDF" :disabled="PDFtrue" icon="ios-download-outline">上传文件</Button> <input ref="filElemPDF" ...
  • 需求分析:点击按钮会弹出一个弹框,弹框中有两个按钮,点击下载按钮进行下载,点击上传按钮进行文件上传。 ps:功能看着可能有点多 ,其实分析一下很简单,首先 点击按钮弹出弹框,在弹框中有一个按钮和一个upload...
  • 1.前端vue:模板下载与导入Excel导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果class="pull-right"icon="el-icon-upload"type="primary"size="mini"@click="importFile...
  • 今天写一个文件上传的功能,开始想用element-ui的组件写,但是发现...这是表单:点击上传按钮提交请求:var formData = new FormData()var file = document.querySelector('input[type=file]').files[0]formData.ap...
  • vue + element 实现文件上传

    万次阅读 2019-01-24 11:13:39
    当时写文件上传是一件让人难受的事情,测试了很久,终于完成...4. 点击确定按钮,整合内容提交给接口 难点攻克: 选择一个文件上传,添加第二条时,文件展示有误 如果我一次增加了多条上传框,但从非第一个的上...
  • 2, 当我们点击按钮的时候,手动触发原来Input 的点击事件 3, 当input:type=file 发生变化时,得到文件, 4, 生成formdata 5, 通过axios 去提交文件 fileUpload.vue <template> <div> <!--...
  • vue美化上传图片按钮

    2020-02-28 12:45:32
    默认的input file总感觉太丑了,想改样式还不能直接改 改不了就不用他,咱不受那个气(๑◡๑) 既然改不了,可以用其他元素去代替他,这里 我用的是div ...上传文件</div> <input class="form-btn" ref=...
  • 点击上传思路:将input的type设置为“file”类型即可上传文件。隐藏该input框,同时点击按钮时,调取该input的点击上传功能。剩下的就是css优化页面了。 拖拽上传思路:通过给拖拽框dropbox绑定拖拽事件,当组件销毁...
  • 这个需求是 一个上传文件按钮点击之后选择文件,可以多选,选完之后不上传文件,需要对文件进行配置,也就是添加额外的参数,添加完成之后,点击上传按钮,把文件以及响应文件的参数上传到服务器上去,然后是一...
  • vue文件上传控件

    2018-10-24 13:39:00
    下载地址:... 使用方式: <upload ref='upload' action-url='' :multiple='true'></upload>...action-url//文件保存地址 ...multiple//是否多个文件 ...在用户点击确定按钮的方法里执行...
  • 1、实现下拉框选择参数后可点击按钮 2、文件上传 3、iframe嵌套 <template> <div> <div> <el-row :gutter="15"> <el-form ref="elForm" :model="formData" :rules="rules" size...
  • 由于上传地址问题,需要自定义上传按钮,效果如图由于在页里面没有操作dom,所以想到了用vue的 自定义事件绑定$emit 、$on来把点击事件传递给ueditor。首先是给ueditor添加自定义按钮:1,打开ueditor.all.js,找到...
  • vue elementui 自定义方法实现上传文件

    千次阅读 2020-07-08 10:05:38
    需求:先上传文件,点击导入调用事件。 实现:elementui uppload插件可以自动上传,但是我现在要做到点击按钮触发事件,折腾了半天,才实现要的效果,写下来,提醒自己记得这个过程吧。贴一部分关键代码(个人认为...
  • 1.前端vue:模板下载与导入Excel导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果class="pull-right"icon="el-icon-upload"type="primary"size="mini"@click="impo...
  • 在上传的点击按钮中把input标签的type设置为file,使它变成一个文件组件 特点:文件组件没有数据绑定,否则页面会报错 vue中把文件传到后端去? 怎么触发这个动作(传到后端的这个动作) 方法一 增加按钮 方法二 ...
  • 一.前言项目中使用到比较多的关于Excel的前端...导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 <el-col style="padding: 10px 0 20px;"> <el-butto...
  • 用户可以选择图片,并回显出来,给按钮注册点击事件上传图片和文字参数。 二。代码 1.隐藏 file 输入框 2.将选择图片框上的注册事件 绑定带 file 文件框上 <div class="uploaditem"> <p>添加图片&...
  • 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 icon=el-icon-upload type=primary size=mini click=importFile() >批量导入</el
  • 参考文献 ...主要是自动上传 点击按钮之后选择文件之后变上传(不需要点击其他上传按钮) <el-upload action="#" :limit="limitNum" :auto-upload="true" :before-upload="handleBeforeUpload
  • vue-原生js实现文件上传

    千次阅读 2019-04-24 15:00:27
    1.按钮通过ref触发input的上传功能 <tk-button @click="handleUpLoad">点击上传</tk-button>(自定义标签) <input ref="inputUpLoad" style="display: none" type="file" accept="*" @change=...
  • vue+springboot前后端分离上传单个文件

    千次阅读 2018-11-26 18:10:28
    //点击按钮,出现弹框 &lt;el-button type="primary" round @click="visible=true"&gt;添加文件&lt;/el-button&gt; //弹框 &lt;el-dialog :visible.sync="visible&...
  • 1.前端vue:模板下载与导入Excel导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果class="pull-right"icon="el-icon-upload"type="primary"size="mini"@click="importFile...
  • 需求分析:在使用elementUI中的上传组件时,点击上传按钮就会立即打开文件弹框,有时候不想让文件弹框立即打开,而是点击按钮后先进行其他的判断,若符合情况再打开文件弹框。 方法一 原文链接 方法二 template <...
  • 需求:项目中要求只能上传一个文件,这种场景通过代码已经实现了,但是点击选择文件按钮之后可以拉取多个文件造成多文件同时上传,如下图: 解决办法:在 <uploader-btn :attrs="attrs" single>选择文件<...

空空如也

空空如也

1 2 3 4 5 6
收藏数 109
精华内容 43
关键字:

vue点击按钮上传文件

vue 订阅