关于vue中上传照片问题

Question

初学者，关于上传照片的功能，之前我在网上找的代码里面
`<div class="addPhoto">+</div>

<div class="addinput">
    <input type="file" class="addFile" onchange="previewFile()" name="sPicture">
</div>
<script>
$(".addPhoto").click(function () {
    $('[type=file]').click();
});
</scrpit>`

现在我在vue中，因为觉得选择图片样式难看，改成按钮，我应该在
choosePicture（）里面怎么写去打开$('[type=file]').click()这个功能

`<div>

    <!-- <el-button type="primary" @click="getPhoto">启用相机</el-button>
    <el-button type="primary" @click="takePicture">拍照</el-button> -->
    <el-button type="primary" @click="choosePicture">上传照片</el-button>
    <el-button type="primary" @click="sendPhote">提交</el-button>
    <div style="display: none;"> <input type="file" class="addFile" onchange="previewFile()" name="sPicture" ></div>
  </div>`

Answer 1

<el-button type="primary" @click="choosePicture">上传照片</el-button>
<input ref="fileInput" type="file" class="addFile" onchange="previewFile()" name="sPicture" >

methods:{
    choosePicture(){
        this.$refs.fileInput.click()
    }
}

Answer 2

将 input 的透明度改为0，然后在下一层添加一个自定义样式的上传按钮，在点击的按钮的时候其实触发的是 input

Answer 3

去学习一下 <label> 的用法，然后用 <label for="id1"> + <input type="file" id="id1" hidden>。

Answer 4

首先在element框架现在是有<el-upload>标签的。
你可以通过 slot 传入自定义的上传按钮类型和文字提示。
具体的使用情况可以参考这里
下面写的是一个简单的示例：

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"  //上传地址
  multiple
  :limit="3"  //最多允许上传3个文件
  :on-exceed="handleExceed"  //文件超出限制时发生的钩子函数
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

这里只是一个简单示例，官方文档有更多的钩子函数以及可选属性，如果样式不符合也可以在标签的插槽里面去自定义，如果还有什么问题可以留言