vue+vux实现移动端文件上传样式

样式使用的是vux的cell组件 如下图的官方demo样子

上图的样式需要修改一下，把 保护中 修改成一个图片 并且内嵌一个input type=‘file'  就可以拥有好看的样式的文件上传了

<!--引入组件-->
import { Cell } from 'vux'
<!--官网的组件是这么写的-->
<group>
  <cell title="title" value="value"></cell>
</group>

下面我们要改造cell变成我们想要的结果

<cell title="附件" @click.native.stop="openFile">
     <input type="file" @change="fileChange()" style="display: none" ref="file"multiple="multiple">
     <i class="fa fa-file"></i>
</cell>

解释一下：

@是v-on的缩写；在组建中调用原声clik要加native；stop解释不清楚，请读者百度

input相当于隐藏了，再也看不到那么丑陋的样式了

i标签是图片，使用了fontawesome的样式，在main.js里边引入

import '../node_modules/font-awesome/css/font-awesome.min.css'

如果不使用fontawesome也可以添加样式

style="background: url("图标地址../../的形式");"

现在移动端的文件上传html+css已经写完了

js代码如下：

openFile(){
    this.$refs.file.click();
}

解释一下：

html中给input绑定了一个属性ref = ‘file' 我个人觉得相当于 给input赋值一个id

在通过this.$refs.file 就相当于document.getElementById('file'); 这个都是vue特有的功能；比较特别的dom操作

然后click()方法就会打开文件；

至于@change()方法待续！！！这个方法不大众化，需要单独写！

以上所述是小编给大家介绍的vue+vux实现移动端文件上传样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • javascript html5移动端轻松实现文件上传

    PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. 用的技术主要是: ajax FileReader FormData HTML结构: <div class="camera-area"> <form enctype="multipart/form-data" method="post">

  • vue+vux实现移动端文件上传样式

    vue+vux实现移动端文件上传样式

    样式使用的是vux的cell组件 如下图的官方demo样子 上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type='file'  就可以拥有好看的样式的文件上传了 <!--引入组件--> import { Cell } from 'vux' <!--官网的组件是这么写的--> <group> <cell title="title" value="value"></cell>

  • vue中实现图片和文件上传的示例代码

    html页面 <input type="file" value="" id="file" @change='onUpload'>//注意不能带括号 js代码 methods: { //上传图片 onUpload(e){ var formData = new FormData(); f ormData.append('file', e.target.files[0]); formData.append('type', 'test');

  • vue+springboot+element+vue-resource实现文件上传教程

    vue页面设置 <el-upload class="upload-demo" action="" :before-upload="beforeUpload" //上传前操作 :before-remove="beforeRemove" //移除钱操作 :multiple="false" //禁止多选 :http-request="myUpload" //文件上传,重写文件上传方法,a

  • Vue+thinkphp5.1+axios实现文件上传

    Vue+thinkphp5.1+axios实现文件上传

    本文实例为大家分享了使用thinkphp5.1 + Vue+axios+实现文件上传,供大家参考,具体内容如下 前言 使用thinkphp5.1 + Vue+axios+实现文件上传 一.页面代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>上传Demo</title> <style> .fileBtn{ width: 180p

  • node+axios实现服务端文件上传示例

    目录 一.接口文档介绍 二.文件上传 2-1.初始化项目 2-2.安装插件依赖 2-3.上传核心代码 2-4.执行脚本 最近调研企业wx集成H5应用,其中有一个发送图文消息,需要上传图片到临时素材库.之前做过文件上传到阿里云.七牛云都是服务端提供封装好的文件上传接口,在客户端使用ajax的方式上传.所以就来踩踩坑,使用node+axios实现服务端文件上传. 一.接口文档介绍 请求方式:POST(HTTPS) 请求地址:https://qyapi.weixin.qq.com/cgi-bin/me

  • vue与django(drf)实现文件上传下载功能全过程

    目录 文件上传功能 上传后端部分 上传前端部分(vue添加vue.js和node.js,设置eslint) 文件下载功能 下载后端部分 下载前端部分 总结 文件上传功能 上传后端部分 (一)Models.py from django.db import models class FilesModel(models.Model): //模型名(默认表名) name = models.CharField(max_length=20, default='') //name,fle是字段名(file为上

  • JS实现表单多文件上传样式美化支持选中文件后删除相关项

    JS实现表单多文件上传样式美化支持选中文件后删除相关项

    开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进行完善. 本文根据一个例子,对多文件的上传样式做了一些简单的美化(其实也没怎么美化..),同时支持选择文件后自定义删除相关的文件,最后再上传 文章篇幅较长,先简单看看图示: 一.文件上传基础 1. 单文件上传 最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/f

  • BootStrap文件上传样式超好看【持续更新】

    BootStrap文件上传样式超好看【持续更新】

     一 直接使用bootstrap,利用简单的js控制 http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/ 非常简单,代码如下: <input id="lefile" type="file" style="display:none"> <div class="input-append"> <input id=&quo

  • js自定义input文件上传样式

    js自定义input文件上传样式

    文件上传是我们经常会用到的功能,但是原生的input样式太丑了,能不能自定义一个input文件上传样式呢? 我这里写了两种方法,form表单提交跟ajax异步提交都没有问题,自动上传或者点击上传按钮上传也都没问题 先看效果: 代码贴出来: 方法1 <!-- 方法1: div : 设置宽高.overflow:hidden;超出的部分被隐藏 input : 设置层级z-index = 1;设置透明度opacity:0;设置相对定位position:relative;使两个元素重叠 i : 设置层级z

  • js 实现文件上传样式详情

    js 实现文件上传样式详情

    目录 1.概述 2.创建对象的参数 3.监听例子 4.使用方法 5.源代码 1.概述 这个js包括按钮样式,列表样式.带有删除.添加.放大(使用的是自带的放大功能,提供有API来放入你的弹窗来进行展示) 可监听的事件 Value wdaasd onlargeClickCallBack 如果想使用自己的弹窗,只需要监听这个函数,拿到返回值给你的弹窗的img->href进行赋值即可 imgFile对象(包括这个被点击图片的全部信息)that(这个js的全局唯一对象,可以在这里面拿到你所有的值) on

随机推荐