js点击按钮上传文件

春风姐姐

已于 2023-12-13 09:38:06 修改

阅读量794

点赞数 6

文章标签： javascript 开发语言 ecmascript

于 2023-12-10 18:53:41 首次发布

本文链接：https://blog.csdn.net/sumimg/article/details/134912430

版权

在这里插入图片描述

vue语法

<template>
    <div  style="width: 152px;">
        <input id="file" ref="file" class="filepath" @change="changepic()" type="file" />
        <el-button size="small" type="primary" @click="upLoadName()">点击上传</el-button>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {

        };
    },
    computed: {},
    watch: {},
    methods: {
        changepic() {
            var f = document.getElementById('file').files[0];
            var form = {};
            form = new FormData();
            form.append('file', f);
            this.$axios.post('https://file.xxx.com:9500/API/xxx/UpLoadFiles', form).then((res) => {
                console.log(res, 'res');
            })
        },
        upLoadName() {
            this.$refs.file.click();

        },
    },
    created() {
    },
    mounted() {
    },
    beforeCreate() { },
    beforeMount() { },
    beforeUpdate() { },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
    activated() { },
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

</style>

原生方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=0.5, maximum-scale=2.0">
  <link rel="shortcut icon" type="image/x-icon" id="linkHref" href="./logo/logo.ico">
  <title id="checkTitle">标题</title>


</head>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<body>
  <noscript>
    <strong></strong>
  </noscript>
  <div id="app"></div>
  <input id="file"  class="filepath" onchange="changepic()" type="file"  />
  <button onclick="upLoadName()">点击上传</button>

</body>

<script>
  function upLoadName() {
    document.getElementById("file").click()
  }
  function changepic() {
    var f = document.getElementById('file').files[0];
    var form = {};
    form = new FormData();
    form.append('file', f);
    axios.post('https://file.xxx.com:9500/API/xxx/UpLoadFiles', form).then((res) => {
      
      let imgurl = 'https://file.xxx.com:9501/Files/' + res.data[0].Name
    })
  }






</script>

</html>