最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

今日快看!vue+html5实现上传图片

来源：博客园


(资料图)

原理:dispatchEvent 自定义触发事件，常用于自定义鼠标事件或点击事件 ,原生控件input打开上传文件方案：vue项目,点击自己的上传文件图标，通过dispatchEvent主动触发一个自定义上传文件事件 .

  • 原生控件 input

accept 属性:accept = "audio/*" :接受所有的声音文件accept = "video/* " :接受所有的视频文件

accept = "image/* " :接受所有的图像文件。

如需规定多个值，请使用逗号分隔（比如 ）。

  • 隐藏原生上传控件，使用自己上传的图标实现上传功能
  • <script>export default {    methods: {        // 上传图片        uploadImg() {            if (this.$store.state.isInApp) {                console.log("isInApp");            } else {                // 触发一个自定义事件               this.$refs.filElem.dispatchEvent(new MouseEvent("click"));}        },        fileImage(e) {            let that = this;            let file = e.target.files[0];            this.file = file;            // 校验图片格式            var rFilter = /^(image\/jpeg|image\/jpg|image\/png|image\/gif)$/i; // 检查图片格式            if (!rFilter.test(file.type)) {                $utilMsg.warn("不支持的格式，请重新上传！");                return false;            }            // 判断图片是否大于10M            if (file.size >= 10 * 1000 * 1024) {                return $utilMsg.warn("上传图片过大，请重新选择");            }            this.upImgUrl()        },        upImgUrl() {            let params = new FormData();            params.append("file[]", this.file);            let that = this            return window.$.ajax({                type: "POST",                url: xxxxx,                data: params,                contentType: false,                processData: false,                mimeType: "multipart/form-data",                success: function (data) {                    data = JSON.parse(data);                    if (+data.code === 0) {                        let imgarr = data.data                        that.picThumb = imgarr[0].showPath;                        console.log("外部图片", imgarr);                    } else {                        console.log("上传失败");                        return                    }                },            });        },    }}</script>

关键词： 上传文件 上传图片 接受所有