关于H5 图片上传（全篇）

最新推荐文章于 2024-09-06 10:37:18 发布

周亚鑫

最新推荐文章于 2024-09-06 10:37:18 发布

阅读量1.1k

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/q4717529/article/details/124847326

版权

vue 专栏收录该内容

121 篇文章 15 订阅

订阅专栏

首先在main.js引入 import { Form，Field } from ‘vant’;

Vue.use(Form);
Vue.use(Field);

vue文件 template 写入

        <van-field name="uploader" label="文件上传">
          <template #input>
            <van-uploader
              v-model="imgList"
              multiple
              :max-count="1"
              :after-read="toChooseImg"
              :before-delete="delPic"
            />
          </template>
        </van-field>

vue文件 js 写入


  data() {
    return {
      files: [], //图片
      imgList: [],
    };
  },
  
 methods: {
    // 图片信息
    toChooseImg(file) {
      let localData = file.content;
      this.uploadImg(localData.split(",")[1]);
    },
    // 上传图片到服务器
    uploadImg(img) {
      this.$http
        .postRequest("/frontEnd/F/F001", {
          file_type: "1",
          attach_type: "photo",
          file_ext: "jpeg",
          image: img,
          toAliyun: "1",
        })
        .then((res) => {
          if (res.result != "0") {
            this.$toast.fail(res.msg);
          } else {
            this.files.push(res.filePath);
          }
        });
    },
    // 删除图片
    delPic(idx) {
      this.imgList.splice(idx, 1);
      this.files.splice(idx - 1, 1);
    },
    }，