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

2024-03-07 18:32:13

样式使用的是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实现移动端文件上传样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

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

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

本文实例为大家分享了使用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实现表单多文件上传样式美化支持选中文件后删除相关项

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

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

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

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

相关推荐

随机推荐