如何在vue.js 2中创建链接作为文件输入？ [英] How to make a link as a file input in vue.js 2?

问题描述

我的vue组件如下：

 < template> 
 ... 
< a href =javascript :; class =thumbs
：title =upload> 
< span class =fa fa-plus fa-2x>< / span> 
< / a> 
 ... 
< / template> 
< script> 
导出默认值{
道具：['...']，
 data（）{
 return {
 ... 
}; 
}，
计算：{
 ... 
} 
} 
< / script> 
  

我想如果点击一个链接，它可以上传文件

在javascript中，我知道它。如果这样的JavaScript：如何使一个链接作为一个文件输入

但是我怎样才能在vue.js 2中完成？

解决方案

我相信有一个小小的误区：Vue.js 2 仍然是javascript 。它的目标与聚合物不同，它的花哨组件 - 它应该是增强JS，而不是用一个不同的结构替换它。

@David HallbergJönsson的回答在Vue.js 2中完美地工作得很好。如果你想特别在Vue的组件结构中：

 < template> 
<！ -  ...  - > 
< a class =fileContainer> 
点击这里触发文件上传！ 
< input type =file> 
< / a> 
<！ -  ...  - > 
< / template> 
< script> 
导出默认值{
道具：['...']，
 data（）{
 return {
 ... 
}; 
}，
计算：{
 ... 
} 
} 
< / script> 
< style> 
 a.fileContainer {
 overflow：hidden; 
 position：relative; 
 cursor：pointer; 
 display：inline-block; 
 color：lightskyblue; 
} 
 
 a.fileContainer：hover {
 text-decoration：underline; 
颜色：蓝色; 
} 
 
 a.fileContainer>输入[type = file] {
 cursor：inherit; 
 filter：alpha（opacity = 0）; 
 opacity：0; 
 position：absolute; 
 top：0; 
剩下：0; 
宽度：100％; 
身高：100％; 
 text-align：right; 
} 
< / style> 
  

如果您想在链接中使用编程方式，这并不容易，因为有些浏览器不允许触发输入类型=文件元素上的点击事件。你最好的选择就是这样。

（另外，从技术上讲，你仍然可以在Vue中使用jQuery，所以如果你想要的话，那个链接里的代码仍然可以工作）

如果您想知道如何处理上传文件，那么很多 教程和一些 组件已经预先制作好了。

My vue component like this :

<template>
    ...
        <a href="javascript:;" class="thumbs"
           :title="upload">
            <span class="fa fa-plus fa-2x"></span>
        </a> 
    ...
</template>
<script>
    export default {
        props: ['...'],
        data() {
              return {
                    ...
              };
        },
        computed:{
            ...
        }
    }
</script>

I want if click the a link, it can upload file

In javascript, I know it. If javascript like this : How to make a link act as a file input

But How can I do it in vue.js 2?

解决方案

I believe there is a small misunderstanding: Vue.js 2 is still javascript. Its goal is not the same as Polymer with its fancy components - it is supposed to enhance JS, not replace it with a different structure altogether.

@David Hallberg Jönsson's answer will work perfectly fine in Vue.js 2 perfectly fine. If you want it specifically in Vue's component structure:

<template>
<!-- ... -->
    <a class="fileContainer">
        Click here to trigger the file uploader!
        <input type="file">
    </a>
<!-- ... -->
</template>
<script>
export default {
    props: ['...'],
    data() {
          return {
                ...
          };
    },
    computed:{
        ...
    }
}
</script>
<style>
a.fileContainer {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    display: inline-block;
    color: lightskyblue;
}

a.fileContainer:hover {
  text-decoration: underline;
  color: blue;
}

a.fileContainer > input[type=file] {
    cursor: inherit;
    filter: alpha(opacity=0);
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: right;
}
</style>

If you want to use the programmatic way in your link, it's not going to be easy because some browsers don't allow you to trigger click events on input type="file" elements. Your best bet would be to go this way.

(Also, technically you can still use jQuery with Vue, so the code in that link could still work if you wanted it to.)

If you want to know how to handle uploading files, there are many tutorials and some components already pre-made.

这篇关于如何在vue.js 2中创建链接作为文件输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！